CSS

Trình duyệt xác định kiểu hiển thị trên một phần tử tùy thuộc vào độ đặc hiệu của các quy tắc CSS. Chúng ta giả định rằng trình duyệt đã xác định các quy tắc phù hợp với một phần tử cụ thể. Trong số các quy tắc phù hợp, độ đặc hiệu, bốn giá trị được phân tách bằng dấu phẩy, 'a, b, c, d' được tính cho mỗi quy tắc dựa trên những điều sau:

1. 'a' là liệu các kiểu nội tuyến có đang được sử dụng hay không. Nếu khai báo thuộc tính là một kiểu nội tuyến trên phần tử, 'a' là 1, ngược lại là 0.
2. 'b' là số lượng bộ chọn ID.
3. 'c' là số lượng lớp, thuộc tính và bộ chọn giả lớp.
4. 'd' là số lượng thẻ và bộ chọn giả phần tử.

Độ đặc hiệu kết quả không phải là một điểm số, mà là một ma trận các giá trị có thể so sánh theo cột. Khi so sánh các bộ chọn để xác định bộ chọn nào có độ đặc hiệu cao nhất, hãy nhìn từ trái sang phải và so sánh giá trị cao nhất trong mỗi cột. Vì vậy, một giá trị trong cột 'b' sẽ ghi đè các giá trị trong cột 'c' và 'd', bất kể chúng có thể là gì. Do đó, độ đặc hiệu của '0,1,0,0' sẽ lớn hơn '0,0,10,10'.

Trong trường hợp độ đặc hiệu bằng nhau: quy tắc mới nhất là quy tắc được tính. Nếu bạn đã viết cùng một quy tắc vào bảng kiểu của mình (bất kể nội bộ hay bên ngoài) hai lần, thì quy tắc thấp hơn trong bảng kiểu của bạn càng gần phần tử cần được tạo kiểu, nó được coi là đặc hiệu hơn và do đó sẽ được áp dụng.

Tôi sẽ viết các quy tắc CSS với độ đặc hiệu thấp để chúng có thể dễ dàng bị ghi đè nếu cần. Khi viết mã thư viện thành phần giao diện người dùng CSS, điều quan trọng là chúng phải có độ đặc hiệu thấp để người dùng thư viện có thể ghi đè chúng mà không cần sử dụng các quy tắc CSS quá phức tạp chỉ để tăng độ đặc hiệu hoặc phải dùng đến '!important'.

• Đặt lại - Đặt lại có nghĩa là loại bỏ tất cả các kiểu trình duyệt mặc định trên các phần tử. Ví dụ: 'margin', 'padding', 'font-size' của tất cả các phần tử được đặt lại thành giống nhau. Bạn sẽ phải khai báo lại kiểu cho các phần tử kiểu chữ thông thường.
• Chuẩn hóa - Chuẩn hóa giữ lại các kiểu mặc định hữu ích thay vì “bỏ kiểu” mọi thứ. Nó cũng sửa lỗi cho các phụ thuộc trình duyệt phổ biến.

Tôi sẽ chọn đặt lại khi tôi có một thiết kế trang web rất tùy chỉnh hoặc độc đáo đến mức tôi cần thực hiện nhiều kiểu riêng và không cần giữ lại bất kỳ kiểu mặc định nào.

Float là một thuộc tính định vị CSS. Các phần tử đã float vẫn là một phần của luồng trang và sẽ ảnh hưởng đến vị trí của các phần tử khác (ví dụ: văn bản sẽ chảy xung quanh các phần tử đã float), không giống như các phần tử có 'position: absolute', được loại bỏ khỏi luồng trang.

Thuộc tính CSS 'clear' có thể được sử dụng để định vị bên dưới các phần tử đã float 'left'/'right'/'both'.

Nếu một phần tử cha chỉ chứa các phần tử đã float, chiều cao của nó sẽ bị thu gọn về không. Nó có thể được khắc phục bằng cách xóa float sau các phần tử đã float trong vùng chứa nhưng trước khi đóng vùng chứa.

Thủ thuật '.clearfix' sử dụng một bộ chọn giả CSS thông minh (pseudo selector) ('::after') để xóa float. Thay vì đặt 'overflow' trên phần tử cha, bạn áp dụng một lớp bổ sung 'clearfix' cho nó. Sau đó áp dụng CSS này:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Ngoài ra, hãy đặt thuộc tính 'overflow: auto' hoặc 'overflow: hidden' cho phần tử cha, điều này sẽ thiết lập một ngữ cảnh định dạng khối mới bên trong các phần tử con và nó sẽ mở rộng để chứa các phần tử con của nó.

Thuộc tính 'z-index' trong CSS kiểm soát thứ tự xếp chồng theo chiều dọc của các phần tử chồng lên nhau. 'z-index' chỉ ảnh hưởng đến các phần tử có giá trị 'position' không phải là 'static'.

Không có giá trị 'z-index' nào, các phần tử xếp chồng theo thứ tự chúng xuất hiện trong DOM (phần tử thấp nhất ở cùng cấp phân cấp xuất hiện trên cùng). Các phần tử có định vị không tĩnh (và các phần tử con của chúng) sẽ luôn xuất hiện trên các phần tử có định vị tĩnh mặc định, bất kể thứ bậc HTML.

Một ngữ cảnh xếp chồng là một phần tử chứa một tập hợp các lớp. Trong một ngữ cảnh xếp chồng cục bộ, các giá trị 'z-index' của các phần tử con của nó được đặt tương đối với phần tử đó chứ không phải với gốc tài liệu. Các lớp bên ngoài ngữ cảnh đó — tức là các phần tử cùng cấp của một ngữ cảnh xếp chồng cục bộ — không thể nằm giữa các lớp trong đó. Nếu một phần tử B nằm trên phần tử A, một phần tử con của phần tử A, phần tử C, không bao giờ có thể cao hơn phần tử B ngay cả khi phần tử C có 'z-index' cao hơn phần tử B.

Mỗi ngữ cảnh xếp chồng là tự chứa - sau khi nội dung của phần tử được xếp chồng, toàn bộ phần tử được xem xét theo thứ tự xếp chồng của ngữ cảnh xếp chồng cha. Một số thuộc tính CSS kích hoạt một ngữ cảnh xếp chồng mới, chẳng hạn như 'opacity' nhỏ hơn 1, 'filter' không phải là 'none' và 'transform' không phải là 'none'.

_Lưu ý: Những gì chính xác khiến một phần tử tạo ra một ngữ cảnh xếp chồng được liệt kê trong bộ [quy tắc] dài này.

Ngữ cảnh định dạng khối (BFC) là một phần của hiển thị CSS trực quan của một trang web trong đó các hộp khối được bố trí. Các floats, các phần tử được định vị tuyệt đối, 'inline-blocks', 'table-cells', 'table-caption's và các phần tử có 'overflow' khác với 'visible' (trừ khi giá trị đó đã được truyền đến khung nhìn) thiết lập các ngữ cảnh định dạng khối mới.

Biết cách thiết lập ngữ cảnh định dạng khối là quan trọng, bởi vì nếu không làm như vậy, hộp chứa sẽ không [chứa các phần tử con đã float]. Điều này tương tự như việc thu gọn lề, nhưng tinh vi hơn vì bạn sẽ thấy toàn bộ hộp thu gọn theo những cách kỳ lạ.

Một BFC là một hộp HTML thỏa mãn ít nhất một trong các điều kiện sau:

• Giá trị của 'float' không phải là 'none'.
• Giá trị của 'position' không phải là 'static' cũng không phải là 'relative'.
• Giá trị của 'display' là 'table-cell', 'table-caption', 'inline-block', 'flex', hoặc 'inline-flex', 'grid', hoặc 'inline-grid'.
• Giá trị của 'overflow' không phải là 'visible'.

Trong một BFC, cạnh ngoài bên trái của mỗi hộp chạm vào cạnh trái của khối chứa (đối với định dạng từ phải sang trái, các cạnh phải chạm vào).

Các lề dọc giữa các hộp cấp khối liền kề trong một BFC bị thu gọn. Đọc thêm về [thu gọn lề].

• Phương pháp 'div' trống - '<div style="clear:both;"></div>'.
• Phương pháp Clearfix - Tham khảo lớp '.clearfix' ở trên.
• Phương pháp 'overflow: auto' hoặc 'overflow: hidden' - Phần tử cha sẽ thiết lập một ngữ cảnh định dạng khối mới và mở rộng để chứa các phần tử con đã float của nó.

Trong các dự án lớn, tôi sẽ viết một lớp tiện ích '.clearfix' và sử dụng chúng ở những nơi tôi cần. 'overflow: hidden' có thể cắt các phần tử con nếu phần tử con cao hơn phần tử cha và không lý tưởng lắm.

CSS sprites kết hợp nhiều hình ảnh thành một hình ảnh lớn hơn. Đây là một kỹ thuật thường được sử dụng cho các biểu tượng (Gmail sử dụng nó). Cách triển khai:

1. Sử dụng trình tạo sprite để đóng gói nhiều hình ảnh thành một và tạo CSS phù hợp cho nó.
2. Mỗi hình ảnh sẽ có một lớp CSS tương ứng với các thuộc tính 'background-image', 'background-position' và 'background-size' được định nghĩa.
3. Để sử dụng hình ảnh đó, hãy thêm lớp tương ứng vào phần tử của bạn.

Ưu điểm:

• Giảm số lượng yêu cầu HTTP cho nhiều hình ảnh (chỉ cần một yêu cầu duy nhất cho mỗi spritesheet). Nhưng với HTTP2, việc tải nhiều hình ảnh không còn là vấn đề lớn.
• Tải trước các tài sản sẽ không được tải xuống cho đến khi cần, chẳng hạn như hình ảnh chỉ xuất hiện khi ở trạng thái giả ':hover'. Sẽ không thấy nhấp nháy.

• Sau khi xác định vấn đề và trình duyệt gây ra lỗi, hãy sử dụng một bảng kiểu riêng biệt chỉ tải khi trình duyệt cụ thể đó đang được sử dụng. Tuy nhiên, kỹ thuật này yêu cầu hiển thị phía máy chủ.
• Sử dụng các thư viện như Bootstrap đã xử lý các vấn đề kiểu dáng này cho bạn.
• Sử dụng 'autoprefixer' để tự động thêm tiền tố nhà cung cấp vào mã của bạn.
• Sử dụng Reset CSS hoặc Normalize.css.
• Nếu bạn đang sử dụng Postcss (hoặc một thư viện biên dịch tương tự), có thể có các plugin cho phép bạn chọn sử dụng cú pháp CSS hiện đại (và thậm chí các đề xuất của W3C) sẽ biến đổi các phần mã của bạn thành mã an toàn tương ứng sẽ hoạt động trong các mục tiêu bạn đã sử dụng.

• Giảm cấp từ từ - Thực hành xây dựng một ứng dụng cho các trình duyệt hiện đại đồng thời đảm bảo nó vẫn hoạt động trong các trình duyệt cũ hơn.
• Nâng cao dần dần - Thực hành xây dựng một ứng dụng cho mức độ trải nghiệm người dùng cơ bản, nhưng thêm các cải tiến chức năng khi trình duyệt hỗ trợ nó.
• Sử dụng [caniuse.com] để kiểm tra hỗ trợ tính năng.
• Autoprefixer để tự động chèn tiền tố nhà cung cấp.
• Phát hiện tính năng bằng [Modernizr].
• Sử dụng các truy vấn tính năng CSS [@support]

Các kỹ thuật này liên quan đến khả năng truy cập (a11y).

• 'width: 0; height: 0'. Làm cho phần tử không chiếm bất kỳ không gian nào trên màn hình, dẫn đến việc không hiển thị nó.
• 'position: absolute; left: -99999px'. Định vị nó bên ngoài màn hình.
• 'text-indent: -9999px'. Điều này chỉ hoạt động trên văn bản trong các phần tử 'block'. Đây là một mẹo được sử dụng rộng rãi và nổi tiếng, nhưng nó đi kèm với [một số nhược điểm] như gây ra các vấn đề về hiệu suất, vì vậy bạn có thể muốn cân nhắc sử dụng 'text-indent: 100%' thay thế.
• Thẻ meta. Ví dụ bằng cách sử dụng Schema.org, RDF và JSON-LD.
• WAI-ARIA. Một đặc tả kỹ thuật của W3C quy định cách tăng khả năng truy cập của các trang web.

Ngay cả khi WAI-ARIA là giải pháp lý tưởng, tôi sẽ chọn cách định vị 'absolute', vì nó có ít cạm bẫy nhất, hoạt động với hầu hết các phần tử và là một kỹ thuật dễ dàng.

Trước khi Flex trở nên phổ biến (khoảng năm 2014), hệ thống lưới dựa trên 'float' là đáng tin cậy nhất vì nó vẫn có khả năng hỗ trợ trình duyệt cao nhất trong số các hệ thống hiện có thay thế (flex, grid). Bootstrap đã sử dụng phương pháp 'float' cho đến Bootstrap 4 đã chuyển sang phương pháp dựa trên 'flex'. Hiện tại (2020), 'flex' là phương pháp được khuyến nghị để xây dựng hệ thống lưới và có [hỗ trợ trình duyệt khá tốt].

Đối với những người thích phiêu lưu, họ có thể xem xét [CSS Grid Layout], sử dụng thuộc tính 'grid' mới toanh; nó thậm chí còn tốt hơn 'flex' để xây dựng bố cục lưới và sẽ là cách mặc định để làm như vậy trong tương lai.

Có. Một ví dụ là chuyển đổi điều hướng dạng viên xếp chồng thành điều hướng tab cố định ở cuối màn hình sau một điểm ngắt nhất định.

Có, có nhiều cách để tô màu các hình dạng (bao gồm cả việc chỉ định các thuộc tính trên đối tượng) bằng cách sử dụng CSS nội tuyến, một phần CSS nhúng hoặc một tệp CSS bên ngoài. Hầu hết SVG bạn sẽ tìm thấy trên web sử dụng CSS nội tuyến, nhưng có những ưu và nhược điểm liên quan đến mỗi loại.

Việc tô màu cơ bản có thể được thực hiện bằng cách đặt hai thuộc tính trên nút: 'fill' và 'stroke'. 'fill' đặt màu bên trong đối tượng và 'stroke' đặt màu của đường vẽ xung quanh đối tượng. Bạn có thể sử dụng các lược đồ đặt tên màu CSS tương tự mà bạn sử dụng trong HTML, cho dù đó là tên màu (tức là 'red'), giá trị RGB (tức là 'rgb(255,0,0)'), giá trị Hex, giá trị RGBA, v.v.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

'fill="purple"' ở trên là một ví dụ về một thuộc tính trình bày. Điều thú vị là, và không giống như các kiểu nội tuyến như 'style="fill: purple"' cũng là một thuộc tính, các thuộc tính trình bày có thể bị [ghi đè bởi các kiểu CSS] được định nghĩa trong một bảng kiểu. Vì vậy, nếu bạn làm điều gì đó như 'svg { fill: blue; }' nó sẽ ghi đè màu tím chúng ta đã định nghĩa.

Có, có bốn loại thuộc tính @media (bao gồm cả screen):

• 'all' - cho tất cả các loại thiết bị truyền thông
• 'print' - cho máy in
• 'speech' - cho trình đọc màn hình "đọc" trang ra tiếng
• 'screen' - cho màn hình máy tính, máy tính bảng, điện thoại thông minh, v.v.

Đây là một ví dụ về cách sử dụng loại phương tiện 'print':

@media print {
  body {
    color: black;
  }
}

Đầu tiên, hãy hiểu rằng các trình duyệt khớp các bộ chọn từ phải sang trái (bộ chọn chính). Các trình duyệt lọc các phần tử trong DOM theo bộ chọn chính và duyệt lên các phần tử cha của nó để xác định các khớp. Chiều dài chuỗi bộ chọn càng ngắn, trình duyệt càng nhanh có thể xác định xem phần tử đó có khớp với bộ chọn hay không. Do đó, hãy tránh các bộ chọn chính là thẻ và bộ chọn chung. Chúng khớp với số lượng lớn các phần tử và trình duyệt sẽ phải làm nhiều việc hơn để xác định xem các phần tử cha có khớp hay không.

Phương pháp [BEM (Block Element Modifier)] khuyến nghị rằng mọi thứ đều có một lớp duy nhất và, khi bạn cần hệ thống phân cấp, điều đó cũng được tích hợp vào tên lớp, điều này tự nhiên làm cho bộ chọn hiệu quả và dễ ghi đè.

Hãy lưu ý những thuộc tính CSS nào [kích hoạt] reflow, repaint và compositing. Tránh viết các kiểu thay đổi bố cục (kích hoạt reflow) nếu có thể.

Ưu điểm:

• CSS được duy trì dễ dàng hơn.
• Dễ dàng viết các bộ chọn lồng nhau.
• Biến cho việc tạo chủ đề nhất quán. Có thể chia sẻ tệp chủ đề giữa các dự án khác nhau.
• Mixins để tạo CSS lặp lại.
• Các tính năng Sass như vòng lặp, danh sách và bản đồ có thể giúp cấu hình dễ dàng và ít dài dòng hơn.
• Chia mã của bạn thành nhiều tệp. Các tệp CSS cũng có thể được chia nhỏ nhưng làm như vậy sẽ yêu cầu một yêu cầu HTTP để tải xuống từng tệp CSS.

Nhược điểm:

• Yêu cầu công cụ tiền xử lý. Thời gian biên dịch lại có thể chậm.
• Không viết CSS hiện tại và có thể sử dụng được. Ví dụ, bằng cách sử dụng thứ gì đó như [postcss-loader] với [webpack], bạn có thể viết CSS có thể tương thích trong tương lai, cho phép bạn sử dụng các thứ như biến CSS thay vì biến Sass. Do đó, bạn đang học các kỹ năng mới có thể mang lại lợi ích nếu/khi chúng trở thành tiêu chuẩn.

Thích:

• Chủ yếu là những ưu điểm đã đề cập ở trên.
• Ít được viết bằng JavaScript hơn, hoạt động tốt với Node.

Không thích:

• Tôi sử dụng Sass thông qua 'node-sass', đây là một liên kết cho LibSass được viết bằng C++. Tôi phải thường xuyên biên dịch lại nó khi chuyển đổi giữa các phiên bản node.
• Trong Less, tên biến được tiền tố bằng '@', điều này có thể bị nhầm lẫn với các từ khóa CSS gốc như '@media', '@import' và quy tắc '@font-face'.

Sử dụng '@font-face' và định nghĩa 'font-family' cho các 'font-weight' khác nhau.

Phần này liên quan đến phần trên về viết CSS hiệu quả. Các trình duyệt khớp các bộ chọn từ phải sang trái (bộ chọn chính). Các trình duyệt lọc các phần tử trong DOM theo bộ chọn chính và duyệt lên các phần tử cha của nó để xác định các khớp. Chiều dài chuỗi bộ chọn càng ngắn, trình duyệt càng nhanh có thể xác định xem phần tử đó có khớp với bộ chọn hay không.

Ví dụ với bộ chọn 'p span' này, các trình duyệt trước tiên tìm tất cả các phần tử '<span>' và duyệt lên phần tử cha của nó cho đến gốc để tìm phần tử '<p>'. Đối với một '<span>' cụ thể, ngay khi nó tìm thấy một '<p>', nó biết rằng '<span>' khớp và có thể dừng việc khớp của nó.

Một phần tử giả CSS là một từ khóa được thêm vào một bộ chọn cho phép bạn tạo kiểu cho một phần cụ thể của (các) phần tử được chọn. Chúng có thể được sử dụng để trang trí (':first-line', ':first-letter') hoặc thêm các phần tử vào đánh dấu (kết hợp với 'content: ...') mà không cần phải sửa đổi đánh dấu (':before', ':after').

• ':first-line' và ':first-letter' có thể được sử dụng để trang trí văn bản.
• Được sử dụng trong thủ thuật '.clearfix' như đã hiển thị ở trên để thêm một phần tử không gian bằng không với 'clear: both'.
• Các mũi tên tam giác trong chú giải công cụ sử dụng ':before' và ':after'. Khuyến khích tách biệt các mối quan tâm vì tam giác được coi là một phần của kiểu dáng chứ không thực sự là DOM.

Mô hình hộp CSS mô tả các hộp hình chữ nhật được tạo cho các phần tử trong cây tài liệu và được bố trí theo mô hình định dạng trực quan. Mỗi hộp có một vùng nội dung (ví dụ: văn bản, hình ảnh, v.v.) và các vùng 'padding', 'border' và 'margin' tùy chọn bao quanh.

Mô hình hộp CSS chịu trách nhiệm tính toán:

• Một phần tử khối chiếm bao nhiêu không gian.
• Liệu viền và/hoặc lề có chồng lên nhau hoặc thu gọn hay không.
• Kích thước của một hộp.

Mô hình hộp có các quy tắc sau:

• Kích thước của một phần tử khối được tính bằng 'width', 'height', 'padding', 'border' và 'margin'.
• Nếu không có 'height' được chỉ định, một phần tử khối sẽ cao bằng nội dung mà nó chứa, cộng với 'padding' (trừ khi có float, xem bên dưới).
• Nếu không có 'width' được chỉ định, một phần tử khối không float sẽ mở rộng để vừa với chiều rộng của phần tử cha của nó trừ đi 'padding'.
• 'height' của một phần tử được tính bằng 'height' của nội dung.
• 'width' của một phần tử được tính bằng 'width' của nội dung.
• Theo mặc định, 'padding' và 'border' không phải là một phần của 'width' và 'height' của một phần tử.

• Theo mặc định, các phần tử được áp dụng 'box-sizing: content-box', và chỉ kích thước nội dung được tính đến.
• 'box-sizing: border-box' thay đổi cách tính 'width' và 'height' của các phần tử, 'border' và 'padding' cũng được bao gồm trong phép tính.
• 'height' của một phần tử giờ đây được tính bằng 'height' của nội dung + 'padding' dọc + chiều rộng 'border' dọc.
• 'width' của một phần tử giờ đây được tính bằng 'width' của nội dung + 'padding' ngang + chiều rộng 'border' ngang.
• Tính đến 'padding' và 'border' như một phần của mô hình hộp của chúng ta tương đồng hơn với cách các nhà thiết kế thực sự hình dung nội dung trong các lưới.

• 'none', 'block', 'inline', 'inline-block', 'flex', 'grid', 'table', 'table-row', 'table-cell', 'list-item'.

| 'display' | Mô tả | | :-- | :-- | | 'none' | Không hiển thị một phần tử (phần tử không còn ảnh hưởng đến bố cục của tài liệu). Tất cả các phần tử con cũng không còn được hiển thị. Tài liệu được hiển thị như thể phần tử không tồn tại trong cây tài liệu | | 'block' | Phần tử chiếm toàn bộ dòng theo hướng khối (thường là ngang) | | 'inline' | Các phần tử có thể được bố trí cạnh nhau | | 'inline-block' | Tương tự như 'inline', nhưng cho phép một số thuộc tính 'block' như đặt 'width' và 'height' | | 'table' | Hoạt động giống như phần tử '<table>' | | 'table-row' | Hoạt động giống như phần tử '<tr>' | | 'table-cell' | Hoạt động giống như phần tử '<td>' | | 'list-item' | Hoạt động giống như phần tử '<li>' cho phép nó định nghĩa 'list-style-type' và 'list-style-position' |

Tôi sẽ so sánh thêm với 'block' để dễ hiểu hơn.

| | 'block' | 'inline-block' | 'inline' | | --- | --- | --- | --- | | Kích thước | Chiếm toàn bộ chiều rộng của phần tử cha. | Phụ thuộc vào nội dung. | Phụ thuộc vào nội dung. | | Định vị | Bắt đầu trên một dòng mới và không cho phép các phần tử HTML khác bên cạnh nó (trừ khi bạn thêm 'float') | Chảy cùng với các nội dung khác và cho phép các phần tử khác bên cạnh nó. | Chảy cùng với các nội dung khác và cho phép các phần tử khác bên cạnh nó. | | Có thể chỉ định 'width' và 'height' | Có | Có | Không. Sẽ bỏ qua nếu được đặt. | | Có thể căn chỉnh bằng 'vertical-align' | Không | Có | Có | | Lề và đệm | Tất cả các cạnh được tôn trọng. | Tất cả các cạnh được tôn trọng. | Chỉ các cạnh ngang được tôn trọng. Các cạnh dọc, nếu được chỉ định, không ảnh hưởng đến bố cục. Khoảng trống dọc mà nó chiếm phụ thuộc vào 'line-height', mặc dù 'border' và 'padding' xuất hiện trực quan xung quanh nội dung. | | Float | - | - | Trở thành một phần tử giống như 'block' nơi bạn có thể đặt lề và đệm dọc. |

Một phần tử được định vị là một phần tử có thuộc tính 'position' được tính toán là 'relative', 'absolute', 'fixed' hoặc 'sticky'.

• 'static' - Vị trí mặc định; phần tử sẽ chảy vào trang như bình thường. Các thuộc tính 'top', 'right', 'bottom', 'left' và 'z-index' không áp dụng.
• 'relative' - Vị trí của phần tử được điều chỉnh tương đối so với chính nó, không thay đổi bố cục (và do đó để lại một khoảng trống cho phần tử ở vị trí nó sẽ nằm nếu không được định vị).
• 'absolute' - Phần tử được loại bỏ khỏi luồng trang và được định vị tại một vị trí cụ thể tương đối với phần tử tổ tiên được định vị gần nhất của nó nếu có, hoặc nếu không thì tương đối với khối chứa ban đầu. Các hộp được định vị tuyệt đối có thể có lề, và chúng không thu gọn với bất kỳ lề nào khác. Các phần tử này không ảnh hưởng đến vị trí của các phần tử khác.
• 'fixed' - Phần tử được loại bỏ khỏi luồng trang và được định vị tại một vị trí cụ thể tương đối với khung nhìn và không di chuyển khi cuộn.
• 'sticky' - Định vị dính là sự kết hợp giữa định vị tương đối và cố định. Phần tử được coi là được định vị 'relative' cho đến khi nó vượt qua một ngưỡng được chỉ định, tại thời điểm đó nó được coi là được định vị 'fixed'.

• Bootstrap - Chu kỳ phát hành chậm. Bootstrap 4 đã ở giai đoạn alpha gần 2 năm. Thêm một thành phần nút quay, vì nó được sử dụng rộng rãi.
• Semantic UI - Cấu trúc mã nguồn làm cho việc tùy chỉnh chủ đề cực kỳ khó hiểu. Hệ thống chủ đề độc đáo của nó rất khó tùy chỉnh. Đường dẫn cấu hình được mã hóa cứng trong thư viện nhà cung cấp. Không được thiết kế tốt để ghi đè các biến không giống như trong Bootstrap.
• Bulma - Yêu cầu nhiều lớp và đánh dấu không ngữ nghĩa và thừa. Không tương thích ngược. Nâng cấp phiên bản làm hỏng ứng dụng theo những cách tinh vi.

Có. Flexbox chủ yếu dành cho bố cục 1 chiều trong khi Grid dành cho bố cục 2 chiều.

Flexbox giải quyết nhiều vấn đề phổ biến trong CSS, chẳng hạn như căn giữa theo chiều dọc của các phần tử trong một vùng chứa, chân trang dính, v.v. Bootstrap và Bulma dựa trên Flexbox, và nó có lẽ là cách được khuyến nghị để tạo bố cục ngày nay. Đã thử Flexbox trước đây nhưng gặp một số vấn đề tương thích trình duyệt (Safari) khi sử dụng 'flex-grow', và tôi phải viết lại mã của mình bằng cách sử dụng 'inline-blocks' và phép toán để tính toán chiều rộng theo phần trăm, đó không phải là một trải nghiệm tốt.

Grid cho đến nay là cách tiếp cận trực quan nhất để tạo bố cục dựa trên lưới (nó tốt hơn!) nhưng hỗ trợ trình duyệt hiện tại chưa rộng rãi.

Lưu ý rằng hai cách tiếp cận này không loại trừ lẫn nhau.

Việc làm cho một trang web phản hồi nhanh có nghĩa là một số phần tử sẽ phản ứng bằng cách điều chỉnh kích thước hoặc chức năng khác theo kích thước màn hình của thiết bị, điển hình là chiều rộng khung nhìn, thông qua các truy vấn phương tiện CSS, ví dụ, làm cho kích thước phông chữ nhỏ hơn trên các thiết bị nhỏ hơn.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Chiến lược ưu tiên thiết bị di động cũng là phản hồi nhanh, tuy nhiên nó đồng ý rằng chúng ta nên mặc định và định nghĩa tất cả các kiểu cho thiết bị di động, và chỉ thêm các quy tắc phản hồi cụ thể cho các thiết bị khác sau này. Theo ví dụ trước:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Chiến lược ưu tiên thiết bị di động có 2 ưu điểm chính:

• Nó hoạt động hiệu quả hơn trên thiết bị di động, vì tất cả các quy tắc được áp dụng cho chúng không phải được xác thực chống lại bất kỳ truy vấn phương tiện nào.
• Nó buộc phải viết mã sạch hơn đối với các quy tắc CSS phản hồi nhanh.

Cả thiết kế đáp ứng và thích ứng đều cố gắng tối ưu hóa trải nghiệm người dùng trên các thiết bị khác nhau, điều chỉnh theo các kích thước khung nhìn, độ phân giải, ngữ cảnh sử dụng, cơ chế điều khiển khác nhau, v.v.

Thiết kế đáp ứng hoạt động trên nguyên tắc linh hoạt - một trang web duy nhất có thể trông đẹp trên mọi thiết bị. Các trang web đáp ứng sử dụng các truy vấn phương tiện, lưới linh hoạt và hình ảnh đáp ứng để tạo ra trải nghiệm người dùng linh hoạt và thay đổi dựa trên vô số yếu tố. Giống như một quả bóng duy nhất lớn lên hoặc nhỏ lại để vừa với nhiều vòng khác nhau.

Thiết kế thích ứng giống định nghĩa hiện đại hơn về nâng cao dần dần. Thay vì một thiết kế linh hoạt duy nhất, thiết kế thích ứng phát hiện thiết bị và các tính năng khác và sau đó cung cấp tính năng và bố cục thích hợp dựa trên một tập hợp các kích thước khung nhìn và các đặc điểm khác được xác định trước. Trang web phát hiện loại thiết bị được sử dụng và cung cấp bố cục được cài đặt sẵn cho thiết bị đó. Thay vì một quả bóng duy nhất đi qua nhiều vòng có kích thước khác nhau, bạn sẽ có nhiều quả bóng khác nhau để sử dụng tùy thuộc vào kích thước vòng.

Cả hai phương pháp này đều có một số vấn đề cần được cân nhắc:

• Thiết kế đáp ứng có thể khá khó khăn, vì bạn về cơ bản đang sử dụng một bố cục duy nhất nhưng đáp ứng để phù hợp với mọi tình huống. Cách đặt các điểm ngắt truy vấn phương tiện là một thách thức như vậy. Bạn có sử dụng các giá trị điểm ngắt được chuẩn hóa không? Hay bạn sử dụng các điểm ngắt có ý nghĩa đối với bố cục cụ thể của bạn? Điều gì sẽ xảy ra nếu bố cục đó thay đổi?
• Thiết kế thích ứng thường yêu cầu phát hiện tác nhân người dùng, hoặc phát hiện DPI, v.v., tất cả đều có thể không đáng tin cậy.

Retina chỉ là một thuật ngữ tiếp thị để chỉ các màn hình độ phân giải cao có tỷ lệ pixel lớn hơn 1. Điều quan trọng cần biết là việc sử dụng tỷ lệ pixel có nghĩa là các màn hình này đang mô phỏng một màn hình có độ phân giải thấp hơn để hiển thị các phần tử có cùng kích thước. Ngày nay chúng ta coi tất cả các thiết bị di động là màn hình retina mặc định.

Theo mặc định, các trình duyệt hiển thị các phần tử DOM theo độ phân giải của thiết bị, trừ hình ảnh.

Để có đồ họa sắc nét, đẹp mắt tận dụng tối đa màn hình retina, chúng ta cần sử dụng hình ảnh độ phân giải cao bất cứ khi nào có thể. Tuy nhiên, việc luôn sử dụng hình ảnh độ phân giải cao nhất sẽ ảnh hưởng đến hiệu suất vì sẽ cần gửi nhiều byte hơn qua đường truyền.

Để khắc phục vấn đề này, chúng ta có thể sử dụng hình ảnh đáp ứng, như được chỉ định trong HTML5. Nó yêu cầu cung cấp các tệp độ phân giải khác nhau của cùng một hình ảnh cho trình duyệt và để trình duyệt quyết định hình ảnh nào là tốt nhất, sử dụng thuộc tính html 'srcset' và tùy chọn 'sizes', ví dụ:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

Điều quan trọng cần lưu ý là các trình duyệt không hỗ trợ 'srcset' của HTML5 (tức là IE11) sẽ bỏ qua nó và sử dụng 'src' thay thế. Nếu chúng ta thực sự cần hỗ trợ IE11 và chúng ta muốn cung cấp tính năng này vì lý do hiệu suất, chúng ta có thể sử dụng một polyfill JavaScript, ví dụ.

Đối với các biểu tượng, tôi cũng sẽ chọn sử dụng SVG và phông chữ biểu tượng nếu có thể, vì chúng hiển thị rất sắc nét bất kể độ phân giải.

'translate()' là một giá trị của thuộc tính CSS 'transform'. Việc thay đổi 'transform' hoặc 'opacity' không kích hoạt trình duyệt reflow hoặc repaint mà kích hoạt compositing; trong khi thay đổi định vị tuyệt đối kích hoạt 'reflow'. 'transform' khiến trình duyệt tạo một lớp GPU cho phần tử nhưng việc thay đổi các thuộc tính định vị tuyệt đối sử dụng CPU. Do đó 'translate()' hiệu quả hơn và sẽ dẫn đến thời gian vẽ ngắn hơn cho các hoạt ảnh mượt mà hơn.

Khi sử dụng 'translate()', phần tử vẫn chiếm không gian ban đầu của nó (giống như 'position: relative'), không giống như khi thay đổi định vị tuyệt đối.