Tôi có thể viết câu lệnh if trong css không?
|
Phần này mô tả trạng thái của tài liệu này tại thời điểm xuất bản. Bạn có thể tìm thấy danh sách các ấn phẩm hiện tại của W3C và bản sửa đổi mới nhất của báo cáo kỹ thuật này trong chỉ mục báo cáo kỹ thuật của W3C tại https. //www. w3. tổ chức/TR/ Show
Tài liệu này do Nhóm làm việc CSS xuất bản dưới dạng Ảnh chụp nhanh Đề xuất Ứng viên bằng cách sử dụng. Việc xuất bản dưới dạng Khuyến nghị Ứng viên không ngụ ý xác nhận bởi W3C và các Thành viên của nó. Đã nhận được Ảnh chụp Đề xuất Ứng viên, nhằm mục đích thu thập kinh nghiệm triển khai và có các cam kết từ các thành viên Nhóm Công tác đối với việc triển khai. Tài liệu này nhằm mục đích trở thành Khuyến nghị của W3C; Vui lòng gửi phản hồi bằng cách gửi các vấn đề trong GitHub (ưu tiên), bao gồm mã thông số “css-có điều kiện” trong tiêu đề, như thế này. “[css-có điều kiện] …tóm tắt nhận xét…”. Tất cả các vấn đề và nhận xét được lưu trữ. Ngoài ra, phản hồi có thể được gửi đến danh sách gửi thư công cộng (được lưu trữ) www-style@w3. tổ chức Tài liệu này chịu sự điều chỉnh của Tài liệu quy trình W3C ngày 2 tháng 11 năm 2021 Tài liệu này được sản xuất bởi một nhóm hoạt động theo Chính sách Bằng sáng chế của W3C. W3C duy trì một danh sách công khai về bất kỳ tiết lộ bằng sáng chế nào được thực hiện liên quan đến các sản phẩm của nhóm; . Một cá nhân thực sự biết về bằng sáng chế mà cá nhân đó tin rằng có chứa phải tiết lộ thông tin theo quy định của Các tính năng sau đây có nguy cơ gặp rủi ro và có thể bị loại bỏ trong giai đoạn CR
"Có nguy cơ" là một thuật ngữ nghệ thuật của Quy trình W3C và không nhất thiết ngụ ý rằng tính năng này có nguy cơ bị loại bỏ hoặc bị trì hoãn. Điều đó có nghĩa là Nhóm làm việc tin rằng tính năng này có thể gặp khó khăn khi được triển khai tương tác kịp thời và việc đánh dấu tính năng đó như vậy sẽ cho phép Nhóm làm việc loại bỏ tính năng này nếu cần khi chuyển sang giai đoạn Đề xuất Đề xuất mà không cần phải xuất bản một Bản ghi Ứng viên mới mà không cần 1. Giới thiệu1. 1. Lý lịchPhần này không phải là tiêu chuẩn xác định một loại quy tắc nhóm có điều kiện, quy tắc và chỉ cho phép quy tắc kiểu (không phải quy tắc @ khác) bên trong quy tắc đó. Quy tắc @media cung cấp khả năng có các biểu định kiểu dành riêng cho phương tiện, điều này cũng được cung cấp bởi các tính năng liên kết biểu định kiểu như và @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
3. Các hạn chế về nội dung của quy tắc @media khiến chúng trở nên ít hữu ích hơn; Thông số kỹ thuật này mở rộng các quy tắc cho nội dung của quy tắc nhóm có điều kiện để cho phép các quy tắc @ khác, cho phép tác giả kết hợp các tính năng CSS liên quan đến quy tắc @ với biểu định kiểu phương tiện cụ thể trong một biểu định kiểu Thông số kỹ thuật này cũng xác định một loại quy tắc nhóm có điều kiện bổ sung, để giải quyết các yêu cầu của tác giả và người dùng Quy tắc cho phép CSS có điều kiện hỗ trợ triển khai cho các thuộc tính và giá trị CSS. Quy tắc này giúp các tác giả sử dụng các tính năng CSS mới dễ dàng hơn nhiều và cung cấp dự phòng tốt cho các triển khai không hỗ trợ các tính năng đó. Điều này đặc biệt quan trọng đối với các tính năng CSS cung cấp các cơ chế bố cục mới và đối với các trường hợp khác khi một tập hợp các kiểu liên quan cần được điều chỉnh dựa trên hỗ trợ thuộc tính 1. 2. Tương tác mô-đunMô-đun này thay thế và mở rộng tính năng quy tắc được xác định trong phần 7. 2. 1 và kết hợp các sửa đổi trước đây được thực hiện không theo quy chuẩn của phần 1 2. Xử lý quy tắc nhóm có điều kiệnThông số kỹ thuật này xác định một số CSS , được gọi là quy tắc nhóm có điều kiện, liên kết một điều kiện với một nhóm quy tắc CSS khác. Các quy tắc khác nhau này cho phép thử nghiệm các loại điều kiện khác nhau, nhưng chia sẻ hành vi chung về cách sử dụng nội dung của chúng khi điều kiện đúng và khi điều kiện sai Ví dụ, quy tắc này. @media print {
/* hide navigation controls when printing */
#navigation { display: none }
}
gây ra một quy tắc CSS cụ thể (làm cho các phần tử có ID “navigation” được hiển thị. none) chỉ áp dụng khi biểu định kiểu được sử dụng cho phương tiện in Mỗi quy tắc nhóm có điều kiện đều có một điều kiện, điều kiện này bất kỳ lúc nào cũng được đánh giá là đúng hoặc sai. Khi điều kiện là đúng, bộ xử lý CSS phải áp dụng các quy tắc bên trong quy tắc nhóm như thể chúng đang ở vị trí của quy tắc nhóm; . Trạng thái hiện tại của điều kiện không ảnh hưởng đến mô hình đối tượng CSS, trong đó nội dung của quy tắc nhóm luôn nằm trong quy tắc nhóm Điều này có nghĩa là khi nhiều quy tắc nhóm có điều kiện được lồng vào nhau, quy tắc bên trong cả hai quy tắc đó chỉ áp dụng khi tất cả các điều kiện của quy tắc đều đúng Ví dụ: với bộ quy tắc lồng nhau này. @media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
điều kiện của quy tắc được đánh dấu (1) là đúng đối với phương tiện in và điều kiện của quy tắc được đánh dấu (2) là đúng khi chiều rộng của vùng hiển thị (đối với phương tiện in là hộp trang) nhỏ hơn hoặc bằng . Do đó, quy tắc #navigation { display. none } áp dụng bất cứ khi nào biểu định kiểu này được áp dụng cho phương tiện in và quy tắc. lưu ý { float. none } chỉ được áp dụng khi biểu định kiểu được áp dụng cho phương tiện in và chiều rộng của hộp trang nhỏ hơn hoặc bằng 12 cm Khi điều kiện cho quy tắc nhóm có điều kiện thay đổi, bộ xử lý CSS phải phản ánh rằng các quy tắc hiện áp dụng hoặc không còn áp dụng nữa, ngoại trừ các thuộc tính có định nghĩa xác định tác động của các giá trị được tính toán tồn tại trong suốt thời gian tồn tại của giá trị đó (chẳng hạn như đối với một số thuộc tính trong và 3. Nội dung quy tắc nhóm điều kiệnTất cả được xác định để lấy một khối của chúng, điều đó có nghĩa là chúng có thể chấp nhận bất kỳ quy tắc nào thường được cho phép ở cấp cao nhất của biểu định kiểu và không bị hạn chế theo cách khác. (Ví dụ: một quy tắc phải xuất hiện ở phần đầu thực sự của biểu định kiểu và do đó không hợp lệ bên trong quy tắc khác. ) Các quy tắc không hợp lệ hoặc không xác định bên trong phải được coi là không hợp lệ và bị bỏ qua, nhưng không làm mất hiệu lực Mọi tiền tố không gian tên được sử dụng trong a phải được khai báo, nếu không chúng không hợp lệ Ví dụ: quy tắc chứa a này là hợp lệ vì quy tắc này đã được liên kết với một url không gian tên. @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
Ví dụ: để xác định xem quy tắc này có hợp lệ hay không. @supports (content: attr(n|tooltip)) {
// do something }
Tác nhân người dùng sẽ tham khảo bản đồ không gian tên để xem liệu url không gian tên có tồn tại tương ứng với tiền tố "n" hay không 4. Vị trí của các quy tắc nhóm có điều kiệnCác quy tắc nhóm có điều kiện được cho phép ở bất kỳ nơi nào được phép (ở cấp cao nhất của biểu định kiểu, cũng như trong các quy tắc nhóm có điều kiện khác). Bộ xử lý CSS phải xử lý các quy tắc như Bất kỳ điều gì không được phép sau quy tắc kiểu (e. g. , , hoặc @namespace) cũng không được phép sau một quy tắc nhóm có điều kiện và do đó khi được đặt như vậy 5. Biểu định kiểu phương tiện cụ thể. quy tắcQuy tắc @media là quy tắc nhóm có điều kiện có điều kiện là truy vấn phương tiện. Cú pháp của nó là @media { } Nó bao gồm từ khóa at, theo sau là danh sách truy vấn phương tiện (có thể trống) (như được định nghĩa trong ), theo sau là một khối chứa các quy tắc tùy ý. Điều kiện của quy tắc là kết quả của truy vấn phương tiện quy tắc này. @media screen and (min-width: 35em),
print and (min-width: 40em) {
#section_navigation { float: left; width: 10em; }
}
có màn hình điều kiện và (độ rộng tối thiểu. 35em), in và (chiều rộng tối thiểu. 40em), điều này đúng với màn hình hiển thị có chế độ xem ít nhất gấp 35 lần kích thước phông chữ ban đầu và đối với màn hình in có chế độ xem ít nhất gấp 40 lần kích thước phông chữ ban đầu. Khi một trong hai điều này là đúng, điều kiện của quy tắc là đúng và quy tắc #section_navigation { float. trái; . 10em; 6. Truy vấn tính năng. quy tắcQuy tắc @supports là quy tắc nhóm có điều kiện có điều kiện kiểm tra xem tác nhân người dùng có hỗ trợ thuộc tính CSS hay không. cặp giá trị. Các tác giả có thể sử dụng nó để viết các biểu định kiểu sử dụng các tính năng mới khi có sẵn nhưng xuống cấp một cách duyên dáng khi các tính năng đó không được hỗ trợ. Các truy vấn này được gọi là truy vấn tính năng CSS hoặc (thông tục) truy vấn hỗ trợ Ghi chú. CSS hiện có các cơ chế để xuống cấp nhẹ nhàng, chẳng hạn như bỏ qua các thuộc tính hoặc giá trị không được hỗ trợ, nhưng những cơ chế này không phải lúc nào cũng đủ khi các nhóm lớn kiểu dáng cần được gắn với sự hỗ trợ cho một số tính năng nhất định, như trường hợp sử dụng các tính năng hệ thống bố cục mới Cú pháp của điều kiện trong quy tắc tương tự như cú pháp được xác định cho in , nhưng không có logic giá trị "không xác định"
Do đó, cú pháp của quy tắc cho phép kiểm tra thuộc tính. các cặp giá trị và các liên từ tùy ý (và), các phép tách rời (hoặc) và phủ định (không) của chúng Cú pháp của quy tắc là @supports { } với định nghĩa là ________số 8Ngữ pháp trên cố tình rất lỏng lẻo vì lý do tương thích về phía trước, vì quá trình sản xuất cho phép khả năng mở rộng đáng kể trong tương lai. Bất kỳ quy tắc nào không phân tích cú pháp theo ngữ pháp ở trên (nghĩa là quy tắc không khớp với ngữ pháp lỏng lẻo này bao gồm cả sản xuất) đều không hợp lệ. Biểu định kiểu không được sử dụng quy tắc như vậy và bộ xử lý phải bỏ qua quy tắc đó (bao gồm tất cả nội dung của nó) Mỗi thuật ngữ ngữ pháp này được liên kết với một kết quả boolean, như sau Kết quả là kết quả của biểu thức con không phảiKết quả là sự phủ định của thuật ngữ [ và]*Kết quả là đúng nếu tất cả các điều khoản con là đúng và sai nếu ngược lại [ hoặc]*Kết quả là sai nếu tất cả các điều khoản con là sai và đúng nếu không Kết quả là đúng nếu UA khai báo trong ngoặc đơn kết quả là sai Tác giả không được sử dụng trong stylesheets của họ. Nó chỉ tồn tại để tương thích trong tương lai, do đó các bổ sung cú pháp mới không làm mất hiệu lực quá nhiều trong các tác nhân người dùng cũ hơn Điều kiện của quy tắc là kết quả của khúc dạo đầu Ví dụ, quy tắc sau @supports ( display: flex ) {
body, #navigation, #content { display: flex; }
#navigation { background: blue; color: white; }
#article { background: white; color: black; }
}
chỉ áp dụng các quy tắc bên trong quy tắc khi được hỗ trợ Ví dụ sau đây cho thấy một quy tắc bổ sung có thể được sử dụng để cung cấp giải pháp thay thế khi không được hỗ trợ. @media print {
/* hide navigation controls when printing */
#navigation { display: none }
}
0Lưu ý rằng các khai báo có thể gây hại cho bố cục dựa trên flex, vì vậy điều quan trọng là chúng chỉ xuất hiện trong các kiểu không phải flex Ví dụ sau kiểm tra hỗ trợ cho thuộc tính, bao gồm kiểm tra hỗ trợ cho các phiên bản có tiền tố nhà cung cấp của thuộc tính đó. Khi có hỗ trợ, nó chỉ định cả bóng hộp (với các phiên bản có tiền tố) và theo cách nào đó sẽ khiến hộp trở nên vô hình nếu bóng hộp không được hỗ trợ. @media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
0Để tránh nhầm lẫn giữa và và hoặc, cú pháp yêu cầu cả hai và và hoặc được chỉ định rõ ràng (chứ không phải sử dụng dấu phẩy hoặc dấu cách cho một trong số chúng). Tương tự như vậy, để tránh nhầm lẫn do các quy tắc ưu tiên, cú pháp không cho phép trộn lẫn các toán tử and, or, not mà không có lớp dấu ngoặc đơn. Ví dụ: quy tắc sau không hợp lệ. @media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
1Thay vào đó, các tác giả phải viết một trong những điều sau đây @media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
2____23Khai báo đang được kiểm tra phải luôn nằm trong dấu ngoặc đơn, khi đó là điều duy nhất trong biểu thức Ví dụ: quy tắc sau không hợp lệ. @media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
4Thay vào đó, tác giả phải viết @media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
5Cú pháp cho phép thêm dấu ngoặc đơn khi không cần thiết. Tính linh hoạt này đôi khi hữu ích cho tác giả (ví dụ: khi nhận xét các phần của biểu thức) và cũng có thể hữu ích cho các công cụ soạn thảo Ví dụ, tác giả có thể viết. @media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
6một dấu vết. quan trọng đối với một tuyên bố đang được kiểm tra được cho phép, mặc dù nó sẽ không thay đổi tính hợp lệ của tuyên bố Ví dụ: quy tắc sau đây là hợp lệ. @media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
76. 1. Định nghĩa hỗ trợĐối với khả năng tương thích về phía trước, định nghĩa các quy tắc để xử lý các thuộc tính và giá trị không hợp lệ. Các bộ xử lý CSS không triển khai hoặc triển khai một phần thông số kỹ thuật phải coi bất kỳ phần nào của giá trị mà chúng không triển khai hoặc không có mức hỗ trợ có thể sử dụng được là không hợp lệ theo quy tắc này để xử lý các thuộc tính và giá trị không hợp lệ, và do đó Bộ xử lý CSS được coi là hỗ trợ khai báo (bao gồm thuộc tính và giá trị) nếu nó chấp nhận khai báo đó (thay vì loại bỏ nó dưới dạng lỗi phân tích cú pháp) trong một. Nếu bộ xử lý không thực hiện, với mức hỗ trợ khả dụng, giá trị đã cho, thì nó không được chấp nhận khai báo hoặc yêu cầu hỗ trợ cho nó Ghi chú. Lưu ý rằng các thuộc tính hoặc giá trị mà tùy chọn người dùng vô hiệu hóa hỗ trợ một cách hiệu quả vẫn được coi là được định nghĩa này hỗ trợ. Ví dụ: nếu người dùng đã bật chế độ tương phản cao khiến màu sắc bị ghi đè, bộ xử lý CSS vẫn được coi là hỗ trợ thuộc tính mặc dù các khai báo của thuộc tính màu có thể không có tác dụng. Mặt khác, tùy chọn dành cho nhà phát triển có mục đích bật hoặc tắt hỗ trợ cho một tính năng CSS thử nghiệm sẽ ảnh hưởng đến định nghĩa hỗ trợ này Các quy tắc này (và sự tương đương giữa chúng) cho phép tác giả sử dụng dự phòng (theo nghĩa khai báo bị ghi đè bởi các khai báo sau này hoặc với các khả năng mới được cung cấp bởi quy tắc trong thông số kỹ thuật này) hoạt động chính xác cho các tính năng được triển khai. Điều này đặc biệt áp dụng cho các giá trị phức hợp; 7. API7. 1. Tiện ích mở rộng cho giao diện @namespace x url(http://www.w3.org/1999/xlink); @supports (content: attr(x|href)) { // do something } 4Giao diện @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
4 được mở rộng như sau@media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
87. 2. Giao diện @namespace x url(http://www.w3.org/1999/xlink); @supports (content: attr(x|href)) { // do something } 6Giao diện @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
7 đại diện cho tất cả các quy tắc “có điều kiện”, bao gồm một điều kiện và một khối câu lệnh@media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
9@namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
8 thuộc loại @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
9Thuộc tính @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
8 đại diện cho điều kiện của quy tắc. Vì những gì điều kiện này thực hiện khác nhau giữa các giao diện dẫn xuất của @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
6, các giao diện dẫn xuất đó có thể chỉ định hành vi khác nhau cho thuộc tính này (ví dụ: xem @supports (content: attr(n|tooltip)) {
// do something }
2 bên dưới). Trong trường hợp không có hành vi cụ thể theo quy tắc như vậy, các quy tắc sau sẽ được áp dụngThuộc tính @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
8 khi nhận phải trả về kết quả của việc tuần tự hóa điều kiện liên quanKhi đặt thuộc tính @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
8, các bước này phải được thực hiện
7. 3. Giao diện @supports (content: attr(n|tooltip)) { // do something } 2Giao diện @supports (content: attr(n|tooltip)) {
// do something }
6 đại diện cho một quy tắc@namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
0@supports (content: attr(n|tooltip)) {
// do something }
7 thuộc loại @supports (content: attr(n|tooltip)) {
// do something }
8, chỉ đọcThuộc tính @supports (content: attr(n|tooltip)) {
// do something }
7 phải trả về một đối tượng @supports (content: attr(n|tooltip)) {
// do something }
8 cho danh sách các truy vấn phương tiện được chỉ định với quy tắc tại. @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
8 của loại @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
9 (Định nghĩa dành riêng cho CSSMediaRule cho thuộc tính trên CSSConditionRule) Thuộc tính @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
8 (được xác định trên quy tắc cha @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
6), khi nhận, phải trả về giá trị của @media { }5 trên quy tắc Đặt thuộc tính @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
8 phải đặt thuộc tính @media { }5 trên quy tắc 7. 4. Giao diện @media { } 8Giao diện @media { }9 đại diện cho một quy tắc @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
1@namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
8 của loại @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
9 (Định nghĩa quy tắc CSSSupports cụ thể cho thuộc tính trên CSSConditionRule) Thuộc tính @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
8 (được xác định trên quy tắc cha @namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
6), khi nhận, phải trả về điều kiện đã được chỉ định, mà không có bất kỳ sự đơn giản hóa logic nào, để điều kiện được trả về sẽ ước tính thành . Nói cách khác, đơn giản hóa luồng mã thông báo được cho phép (chẳng hạn như giảm khoảng trắng thành một khoảng trắng hoặc bỏ qua nó trong trường hợp nó được biết là tùy chọn), nhưng đơn giản hóa logic (chẳng hạn như loại bỏ dấu ngoặc đơn không cần thiết hoặc đơn giản hóa dựa trên đánh giá kết quả) 7. 5. Không gian tên @media screen and (min-width: 35em), print and (min-width: 40em) { #section_navigation { float: left; width: 10em; } } 4 và hàm @media screen and (min-width: 35em), print and (min-width: 40em) { #section_navigation { float: left; width: 10em; } } 5Không gian tên @media screen and (min-width: 35em),
print and (min-width: 40em) {
#section_navigation { float: left; width: 10em; }
}
6 chứa các chức năng liên quan đến CSS hữu ích không thuộc về nơi nào khác@namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
// do something }
2______67, trả về @media screen and (min-width: 35em),
print and (min-width: 40em) {
#section_navigation { float: left; width: 10em; }
}
8Khi phương thức @media screen and (min-width: 35em),
print and (min-width: 40em) {
#section_navigation { float: left; width: 10em; }
}
9 được gọi với hai đối số thuộc tính và giá trịGhi chú. Không có quá trình xử lý khoảng trắng hoặc thoát CSS nào được thực hiện trên tên thuộc tính, vì vậy, @supports { }0 sẽ trả về @supports { }1, vì " width" không phải là tên của bất kỳ thuộc tính nào do có khoảng trắng ở đầu Ghi chú. . các cờ quan trọng không phải là một phần của ngữ pháp thuộc tính và sẽ khiến giá trị được phân tích cú pháp là không hợp lệ, giống như chúng sẽ xảy ra trong đối số giá trị cho phần tử. Phong cách. setProperty() @supports { }2, trả về @media screen and (min-width: 35em),
print and (min-width: 40em) {
#section_navigation { float: left; width: 10em; }
}
8Khi phương thức @supports { }4 được gọi với một đối số điều kiện duy nhất Tất cả các không gian tên trong đối số conditionText được coi là không hợp lệ, giống như trong @supports { }5 Cân nhắc về Bảo mậtThông số kỹ thuật này giới thiệu không có cân nhắc bảo mật mới Cân nhắc về quyền riêng tưCác tính năng khác nhau trong đặc tả này, chủ yếu được liên kết với quy tắc nhưng cũng ở một mức độ nào đó với quy tắc, cung cấp thông tin cho nội dung Web về phần cứng và phần mềm của người dùng cũng như cấu hình và trạng thái của chúng. Hầu hết thông tin được cung cấp thông qua các tính năng trong chứ không phải thông qua các tính năng trong đặc tả này. Tuy nhiên, quy tắc @supports có thể cung cấp một số chi tiết bổ sung về phần mềm của người dùng và liệu phần mềm đó có đang chạy với cài đặt không mặc định có thể bật hoặc tắt một số tính năng nhất định hay không Hầu hết các thông tin này cũng có thể được xác định thông qua các API khác. Tuy nhiên, các tính năng trong đặc điểm kỹ thuật này là một trong những cách thông tin này được hiển thị trên Web Thông tin tổng hợp này cũng có thể được sử dụng để cải thiện độ chính xác của dấu vân tay của người dùng 8. thay đổiCác thay đổi (không biên tập) sau đây đã được thực hiện đối với thông số kỹ thuật này kể từ Ảnh chụp nhanh Đề xuất Ứng viên ngày 8 tháng 12 năm 2020
Các thay đổi (không biên tập) sau đây đã được thực hiện đối với thông số kỹ thuật này kể từ Đề xuất Ứng viên ngày 4 tháng 4 năm 2013
Sự nhìn nhậnCảm ơn những ý tưởng và phản hồi từ Tab Atkins, Arthur Barstow, Ben Callahan, Tantek Çelik, Alex Danilo, Elika Etemad, Pascal Germroth, Björn Höhrmann, Paul Irish, Brad Kemper, Anne van Kesteren, Vitor Menezes, Alex Mogilevsky, Chris Moschini, Các yêu cầu tuân thủ được thể hiện bằng sự kết hợp của các xác nhận mô tả và thuật ngữ RFC 2119. Các từ khóa “PHẢI”, “KHÔNG PHẢI”, “BẮT BUỘC”, “SẼ”, “SẼ KHÔNG”, “NÊN”, “KHÔNG NÊN”, “KHUYẾN NGHỊ”, “CÓ THỂ” và “TÙY CHỌN” trong các phần quy chuẩn . Tuy nhiên, để dễ đọc, những từ này không xuất hiện ở tất cả các chữ in hoa trong thông số kỹ thuật này Tất cả các văn bản của đặc điểm kỹ thuật này là quy chuẩn ngoại trừ các phần được đánh dấu rõ ràng là không quy chuẩn, ví dụ và ghi chú. Các ví dụ trong đặc điểm kỹ thuật này được giới thiệu với các từ “ví dụ” hoặc được đặt ngoài văn bản quy chuẩn bằng @supports { }7, như thế này Ghi chú thông tin bắt đầu bằng từ “Ghi chú” và được tách biệt khỏi văn bản quy phạm bằng @supports { }8, như thế này Lưu ý, đây là một lưu ý thông tin Lời khuyên là các phần quy phạm được tạo kiểu để gợi lên sự chú ý đặc biệt và được tách biệt khỏi văn bản quy phạm khác bằng @supports { }9, như thế này. UA PHẢI cung cấp giải pháp thay thế có thể truy cập được Sự phù hợp với đặc điểm kỹ thuật này được xác định cho ba lớp phù hợp biểu định kiểu. trình kết xuất Diễn giải ngữ nghĩa của biểu định kiểu và hiển thị các tài liệu sử dụng chúng. công cụ soạn thảo viết biểu định kiểu Biểu định kiểu phù hợp với thông số kỹ thuật này nếu tất cả các câu lệnh sử dụng cú pháp được xác định trong mô-đun này đều hợp lệ theo ngữ pháp CSS chung và ngữ pháp riêng của từng tính năng được xác định trong mô-đun này Trình kết xuất phù hợp với thông số kỹ thuật này nếu, ngoài việc diễn giải biểu định kiểu như được xác định bởi các thông số kỹ thuật phù hợp, nó hỗ trợ tất cả các tính năng được xác định bởi thông số kỹ thuật này bằng cách phân tích cú pháp chúng một cách chính xác và hiển thị tài liệu tương ứng. Tuy nhiên, việc UA không thể hiển thị chính xác tài liệu do hạn chế của thiết bị không làm cho UA không tuân thủ. (Ví dụ: không bắt buộc phải có UA để hiển thị màu trên màn hình đơn sắc. ) Một công cụ soạn thảo phù hợp với thông số kỹ thuật này nếu nó viết biểu định kiểu đúng về mặt cú pháp theo ngữ pháp CSS chung và ngữ pháp riêng của từng tính năng trong mô-đun này và đáp ứng tất cả các yêu cầu tuân thủ khác của biểu định kiểu như được mô tả trong mô-đun này Để tác giả có thể khai thác các quy tắc phân tích cú pháp tương thích chuyển tiếp để gán giá trị dự phòng, trình kết xuất CSS phải coi là không hợp lệ (và ) mọi quy tắc tại, thuộc tính, giá trị thuộc tính, từ khóa và các cấu trúc cú pháp khác mà chúng không có mức hỗ trợ có thể sử dụng được. Cụ thể, tác nhân người dùng không được bỏ qua có chọn lọc các giá trị thành phần không được hỗ trợ và tôn trọng các giá trị được hỗ trợ trong một khai báo thuộc tính đa giá trị. nếu bất kỳ giá trị nào được coi là không hợp lệ (vì các giá trị không được hỗ trợ phải như vậy), CSS yêu cầu bỏ qua toàn bộ phần khai báo Để tránh xung đột với các tính năng CSS ổn định trong tương lai, CSSWG khuyến nghị triển khai các tính năng và CSS Sau khi thông số kỹ thuật đạt đến giai đoạn Đề xuất của Ứng viên, có thể triển khai phi thử nghiệm và người triển khai nên phát hành triển khai không tiền tố của bất kỳ tính năng cấp CR nào mà họ có thể chứng minh là được triển khai chính xác theo thông số kỹ thuật Để thiết lập và duy trì khả năng tương tác của CSS trong quá trình triển khai, Nhóm làm việc CSS yêu cầu các trình kết xuất CSS không thử nghiệm gửi báo cáo triển khai (và, nếu cần, các trường hợp thử nghiệm được sử dụng cho báo cáo triển khai đó) cho W3C trước khi phát hành triển khai không có tiền tố của bất kỳ . Các trường hợp thử nghiệm được gửi tới W3C sẽ được Nhóm công tác CSS xem xét và chỉnh sửa Bạn có thể tìm thêm thông tin về cách gửi bản thử nghiệm và báo cáo triển khai trên trang web của Nhóm làm việc CSS tại https. //www. w3. org/Kiểu/CSS/Thử nghiệm/. Các câu hỏi nên được chuyển đến public-css-testsuite@w3. danh sách gửi thư tổ chức Để thông số kỹ thuật này được nâng cao lên Đề xuất được đề xuất, phải có ít nhất hai triển khai độc lập, có thể tương tác của mỗi tính năng. Mỗi tính năng có thể được triển khai bởi một nhóm sản phẩm khác nhau, không có yêu cầu rằng tất cả các tính năng phải được triển khai bởi một sản phẩm duy nhất. Với mục đích của tiêu chí này, chúng tôi định nghĩa các thuật ngữ sau mỗi triển khai độc lập phải được phát triển bởi một bên khác và không thể chia sẻ, sử dụng lại hoặc lấy từ mã được sử dụng bởi một triển khai đủ điều kiện khác. Các đoạn mã không liên quan đến việc triển khai đặc tả này được miễn yêu cầu này. có thể tương thích với nhau, vượt qua (các) trường hợp thử nghiệm tương ứng trong bộ thử nghiệm CSS chính thức hoặc, nếu việc triển khai không phải là trình duyệt Web, thì một thử nghiệm tương đương. Mỗi thử nghiệm có liên quan trong bộ thử nghiệm phải có một thử nghiệm tương đương được tạo nếu một tác nhân người dùng (UA) như vậy sẽ được sử dụng để yêu cầu khả năng tương tác. Ngoài ra, nếu một UA như vậy được sử dụng để yêu cầu khả năng tương tác, thì phải có một hoặc nhiều UA bổ sung cũng có thể vượt qua các bài kiểm tra tương đương đó theo cách tương tự cho mục đích tương tác. Các bài kiểm tra tương đương phải được cung cấp công khai cho mục đích đánh giá ngang hàng. triển khai một tác nhân người dùng mà
Thông số kỹ thuật sẽ vẫn là Khuyến nghị của Ứng viên trong ít nhất sáu tháng [CSS-CASCADE-5]Elika Etemad; . Xếp tầng CSS và kế thừa cấp độ 5. 3 tháng mười hai 2021. WD. URL. https. //www. w3. org/TR/css-cascade-5/[CSS-SYNTAX-3]Tab Atkins Jr. ; . Mô-đun Cú pháp CSS Cấp 3. 16 Tháng bảy 2019. CR. URL. https. //www. w3. org/TR/css-syntax-3/[CSS-TYPED-OM-1]Shane Stephens; . ; . CSS gõ OM cấp 1. 10 Tháng tư 2018. WD. URL. https. //www. w3. org/TR/css-typed-om-1/[CSS-VALUES-4]Tab Atkins Jr. ; . Mô-đun Đơn vị và Giá trị CSS Cấp 4. 16 tháng mười hai 2021. WD. URL. https. //www. w3. org/TR/css-values-4/[CSS21]Bert Bos; . Cascading Style Sheets Cấp 2 Sửa đổi 1 (CSS 2. 1) Thông số kỹ thuật. 7 tháng sáu 2011. GHI. URL. https. //www. w3. org/TR/CSS21/[CSS3-ANIMATIONS]Dean Jackson; . Ảnh động CSS cấp 1. 11 Tháng mười 2018. WD. URL. https. //www. w3. org/TR/css-animations-1/[CSSOM-1]Daniel Glazman; . Mô hình đối tượng CSS (CSSOM). 26 Tháng tám 2021. WD. URL. https. //www. w3. org/TR/cssom-1/[HTML]Anne van Kesteren; . Tiêu chuẩn HTML. Chất lượng cuộc sống. URL. https. //html. thông số kỹ thuật. cái gì. org/multipage/[INFRA]Anne van Kesteren; . tiêu chuẩn hạ tầng. Chất lượng cuộc sống. URL. https. // hạ tầng. thông số kỹ thuật. cái gì. org/[MEDIAQUERIES-4]Florian Rivoal; . Truy vấn phương tiện cấp 4. 21 Tháng bảy 2020. CR. URL. https. //www. w3. org/TR/mediaqueries-4/[MEDIAQUERIES-5]Dean Jackson; . Truy vấn phương tiện cấp 5. 18 tháng mười hai 2021. WD. URL. https. //www. w3. org/TR/mediaqueries-5/[RFC2119]S. Bradner. Các từ khóa để sử dụng trong RFC để chỉ ra các mức yêu cầu. tháng 3 năm 1997. Thực tiễn tốt nhất hiện tại. URL. https. // trình theo dõi dữ liệu. vietf. org/doc/html/rfc2119[WEBIDL]Edgar Chen; . Web IDL chuẩn. Chất lượng cuộc sống. URL. https. //webidl. thông số kỹ thuật. cái gì. tổ chức/ [CSS-BACKGROUNDS-3]Bert Bos; . Mô-đun Nền và Đường viền CSS Cấp độ 3. 26 tháng bảy 2021. CR. URL. https. //www. w3. org/TR/css-backgrounds-3/[CSS-COLOR-4]Tab Atkins Jr. ; . Mô-đun màu CSS cấp 4. 15 tháng mười hai 2021. WD. URL. https. //www. w3. org/TR/css-color-4/[CSS-DISPLAY-3]Tab Atkins Jr. ; . Mô-đun Hiển thị CSS Cấp 3. 3 tháng 9 năm 2021. CR. URL. https. //www. w3. org/TR/css-display-3/[CSS-NAMESPACES-3]Elika Etemad. Mô-đun không gian tên CSS Cấp 3. 20 tháng ba 2014. GHI. URL. https. //www. w3. org/TR/css-namespaces-3/[CSS-SIZING-3]Tab Atkins Jr. ; . Mô-đun định cỡ hộp CSS cấp 3. 17 Tháng mười hai 2021. WD. URL. https. //www. w3. org/TR/css-sizing-3/[CSS1]Håkon Wium Lie; . Cascading Style Sheets, cấp 1. 13 Tháng chín 2018. GHI. URL. https. //www. w3. org/TR/CSS1/[CSS3-TRANSITIONS]David Baron; . Chuyển tiếp CSS. 11 Tháng mười 2018. WD. URL. https. //www. w3. org/TR/css-transitions-1/ Bạn có thể có logic trong CSS không?CSS Logical Properties and Values là một mô-đun của CSS giới thiệu các thuộc tính và giá trị logic cung cấp khả năng kiểm soát bố cục thông qua các ánh xạ logic, thay vì vật lý, hướng và kích thước. Mô-đun này cũng xác định các thuộc tính logic và giá trị cho các thuộc tính được xác định trước đó trong CSS 2. 1
Câu lệnh if có thể được sử dụng trong HTML không?Không có trong HTML. Cân nhắc sử dụng JavaScript để thay thế. Lưu câu trả lời này
Làm cách nào để áp dụng lớp CSS một cách có điều kiện trong JavaScript?Một lớp CSS có thể được áp dụng có điều kiện trong React bằng cách sử dụng JavaScript đơn giản. . Đặt tất cả các lớp CSS vào một mảng Sử dụng toán tử bậc ba để đặt một chuỗi rỗng làm lớp khi điều kiện sai Tham gia mảng bằng cách sử dụng khoảng trắng, để chuyển đổi nó thành Tên lớp Làm cách nào để viết câu lệnh if trong JavaScript?Cú pháp của câu lệnh if-else trong JavaScript được đưa ra bên dưới. . if(biểu thức){ // nội dung được đánh giá nếu điều kiện là đúng // nội dung được đánh giá nếu điều kiện sai |
