Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

CSS Exclusions: Làm cho Layout bớt nhàm chán hơn

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong hướng dẫn này, chúng ta sẽ khám phá CSS Exclusions. Ở cái nhìn đầu tiên, CSS Exclusions có thể giống như CSS Shapes trong đó chúng quấn nội dung quanh một phần tử. Tuy nhiên, về mặt kỹ thuật, chúng phục vụ cho các mục đích khác nhau.

CSS Shapes xác định hình dạng thật sự của một phần tử, nhưng nội dung sẽ không quấn quanh hình đó cho đến khi phần tử chuyển thành float. Mặc khác, CSS Exclusions, được thiết kế đặc biệt cho việc này; cho phép nội dung trực tiếp bao bọc xung quanh một phần tử mà không cần chuyển thành float, bất kể các phần tử được định vị  như thế nào—absolute, relative, hay fixed.

Các thuộc tính

CSS Exclusions giới thiệu một vài thuộc tính và giá trị mới, cụ thể là:

  • wrap-flow: đặt vùng loại trừ, cũng như cách thức nội dung sẽ quấn xung quanh nó.
  • wrap-margin: thiết lập margin hoặc offset xung quanh khu vực loại trừ.

Trình duyệt hỗ trợ

Điều đáng chú ý là CSS Exclusions hiện chỉ hoạt động trong Internet Explorer 10 trở lên, và Edge, một lần nữa chứng tỏ rằng Microsoft đang đi trước (chúng ta cũng phải cảm ơn cho sự phát triển của CSS Grid). Trong lúc này, chúng ta phải thêm tiền tố -ms- vào các thuộc tính mới khi được sử dụng.

can i use css exclusions
Và những trình duyệt không hỗ trợ được đánh dấu màu đỏ ở bên phải...

Để hiểu rõ hơn về CSS Exclusions hoạt động như thế nào, chúng tôi đã chuẩn bị một trang khởi đầu đơn giản bao gồm một vài dòng nội dung và hình đại diện ở cuối.

Layout không có CSS Exclusions

Đây là một mẫu khá phổ biến trên web, vì vậy hãy xem nếu chúng ta có thể đánh bóng nó lên một chút bằng cách sử dụng CSS Exclusions. Giả sử trình duyệt của bạn hỗ trợ Exclusions, chúng ta sẽ có kết quả này:

Sử dụng CSS Exclusions

Đầu tiên, hãy sắp xếp nội dung thành hai cột và định vị hình ảnh avatar vào giữa. Bạn sắp xếp layout thế nào không thành vấn đề, bạn có thể sử dụng CSS Flexbox, CSS Grid, hoặc phương pháp "truyền thống" sử dụng thuộc tính float.

Rất đẹp, văn bản chia cột (không bắt buộc cho demo này)

Chúng ta có thể thấy ở trên, hình ảnh avatar đã được gỡ bỏ khỏi dòng chảy của tài liệu và được đặt bên trên nội dung, che khuất nó. Sử dụng CSS Exclusions, chúng ta có thể buộc nội dung lưu chuyển xung quanh hình ảnh avatar.

Để làm như vậy, chúng ta thiết lập thuộc tính wrap-flow vào avatar và thiết lập giá trị thành both.

Thuộc tính wrap-flow thiết lập .avatar như là một "khu vực loại trừ"; một khu vực mà không có nội dung đi qua. Như bạn có thể thấy dưới đây, nội dung bây giờ chảy về bên phải và bên trái của avatar.

Các giá trị có thể có

Các giá trị khác có thể chấp nhận là start, end, maximum, minimum, và clear.

Giá trị đầu tiên, start, sẽ quấn nội dung xung quanh điểm bắt đầu của khu vực loại trừ, nhưng để trống phần cuối của khu vực.

Với nội dung trên trang của chúng ta, kết quả sẽ như sau.

Nội dung chảy về bên trái của hình ảnh.

Các giá trị end, như tên gọi của nó cho thấy, hoạt động ngược lại; nó sẽ quấn nội dung xung quanh điểm cuối của khu vực loại trừ.

Điều này cho chúng ta kết quả sau đây:

Bao quanh bên phải

Lưu ý: điểm bắt đầu và kết thúc của khu vực loại trừ được xác định bởi hướng nội dung văn bản. Những ngôn ngữ được viết từ phải sang trái, như thường thấy với tiếng Ả Rập và tiếng Hebrew, thì nội dung bao quanh bắt đầu từ bên phải và kết thúc ở bên trái của khu vực loại trừ.

Với tiếng Nhật, văn bản được viết từ trên xuống dưới, nội dung bao quanh bắt đầu từ trên và kết thúc ở phía dưới.

Dòng chảy nội dung trong những hướng viết khác nhau. Hình ảnh của (W3C)

Giá trị thứ ba có thể chấp nhận là maximum.

Điều này sẽ bọc nội dung xung quanh khu vực loại trừ bất cứ nơi nào nó tìm thấy không gian rộng hơn trong khu vực container.

Giá trị minimum hoạt động theo cách ngược lại.

Ở đây, nội dung sẽ chảy qua không gian hẹp nhất có sẵn xung quanh khu vực loại trừ.

Giá trị cuối cùng là clear.

Điều này khá giống với clear mà bạn đã quen thuộc từ float, trong đó nó sẽ clear bên phải và bên trái của khu vực loại trừ. Do đó, nó chỉ cho phép dòng nội dung chảy ở trên và dưới cùng của khu vực loại trừ.

Exclusions Margin

Tương tự như CSS Shapes, CSS Exclusions cũng đi kèm với một thuộc tính để xác định margin của khu vực loại trừ, cụ thể là wrap-margin. Không giống thuộc tính margin, giá trị của wrap-margin phải là một giá trị dương.

Hơn nữa, các thuộc tính wrap-margin không cho phép chúng ta thiết lập margin của mỗi bên (bên phải, trái, trên, và dưới) một cách riêng lẻ. Dù vậy tính năng này sẽ được giới thiệu trong tương lai.

Sau khi thiết lập, chúng ta sẽ thấy khoảng trắng xung quanh khu vực loại trừ.

@supports

Giả sử rằng chúng ta đã định vị avatar của chúng ta trên nội dung, nhưng mà trình duyệt không hỗ trợ CSS Exclusions và chúng ta có một layout lộn xộn. Vì vậy, chúng ta cần xem xét phương án dự phòng, và bọc các phong cách có liên quan trong một quy tắc @supports, như sau:

Bây giờ CSS Exclusions của chúng ta sẽ chỉ được áp dụng nếu được hỗ trợ bởi trình duyệt.

Tổng kết

CSS Exclusions, cùng với CSS Shapes và cùng với các tính năng hiện đại khác, sẽ cho phép chúng ta khám phá các layout website bên cạnh những gì chúng ta đã quen thuộc. Hy vọng rằng chúng ta sẽ thấy sự tiến bộ nhanh chóng trong việc hỗ trợ trình duyệt, và tiến triển từ nhóm Microsoft Edge!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.