Chúng ta có thể cung cấp quan trọng trong css nội tuyến không?

Louis là nhà phát triển giao diện người dùng, nhà văn và tác giả có trụ sở tại Toronto, Canada. Anh ấy quản lý các bản tin Công cụ web hàng tuần và Năng suất công nghệ và viết blog về … Thông tin thêm về Louis ↬

Bản tin email

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

• 
  Xem trực tiếp vào tháng 12. thứ 8

• 
  Xây dựng email HTML hiện đại

• 
  SmashingConf San Francisco. Tất cả về Frontend. Ngày 23–26 tháng 5 năm 2023

• 
  Nắm vững quy trình thiết kế với Paul Boag

Khi đặc tả CSS1 được soạn thảo vào giữa đến cuối những năm 90, nó đã đưa ra các khai báo !important giúp các nhà phát triển và người dùng dễ dàng ghi đè tính đặc hiệu thông thường khi thực hiện các thay đổi đối với biểu định kiểu của họ. Phần lớn, các khai báo của !important vẫn giữ nguyên, chỉ có một thay đổi duy nhất trong CSS2. 1 và không có gì mới được thêm hoặc thay đổi trong thông số CSS3 liên quan đến khai báo duy nhất này

Đọc thêm trên SmashingMag.

• Tính đặc hiệu và tính kế thừa của CSS
• Nắm vững các nguyên tắc CSS. Hướng dẫn toàn diện
• Tính đặc hiệu của CSS. Những điều bạn nên biết
• Kế thừa CSS, Cascade và Phạm vi toàn cầu

Chúng ta hãy xem chính xác những loại khai báo này là gì và khi nào, nếu có, bạn nên sử dụng chúng

Sơ yếu lý lịch về Cascade

Trước khi chúng ta đi vào khai báo !important và chính xác cách chúng hoạt động, hãy thảo luận một chút về ngữ cảnh. Trước đây, Tạp chí Smashing đã đề cập sâu về tính đặc hiệu của CSS, vì vậy vui lòng xem bài viết đó nếu bạn muốn thảo luận chi tiết về tầng CSS và mức độ đặc hiệu liên quan đến

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

Dưới đây là phác thảo cơ bản về cách bất kỳ tài liệu theo kiểu CSS cụ thể nào sẽ quyết định mức độ quan trọng đối với các kiểu khác nhau mà nó gặp phải. Đây là một bản tóm tắt chung của tầng như được thảo luận trong thông số kỹ thuật

• Tìm tất cả các khai báo áp dụng cho phần tử và thuộc tính
• Áp dụng kiểu dáng cho phần tử dựa trên mức độ quan trọng và nguồn gốc theo thứ tự sau, với mục đầu tiên trong danh sách có trọng số nhỏ nhất
  • Tuyên bố từ tác nhân người dùng
  • Tuyên bố từ người dùng
  • Tuyên bố từ tác giả
  • Tuyên bố từ tác giả có thêm !important
  • Tuyên bố từ người dùng có thêm !important
• Áp dụng kiểu dáng dựa trên tính đặc hiệu, với bộ chọn cụ thể hơn sẽ “chiến thắng” so với những bộ chọn chung chung hơn
• Áp dụng kiểu dáng dựa trên thứ tự mà chúng xuất hiện trong biểu định kiểu dáng (i. e. , trong trường hợp hòa, người cuối cùng “thắng”)

Với phác thảo cơ bản đó, có lẽ bạn đã có thể thấy mức độ quan trọng của các khai báo !important và vai trò của chúng trong chuỗi. Hãy xem xét !important chi tiết hơn

CSS quan trọng là gì?

Khai báo !important cung cấp một cách để tác giả biểu định kiểu đặt trọng số cho giá trị CSS nhiều hơn giá trị tự nhiên của nó

Cú pháp và Mô tả

Cần lưu ý ở đây rằng cụm từ “. khai báo quan trọng” là tham chiếu đến toàn bộ khai báo CSS, bao gồm thuộc tính và giá trị, có thêm !important (cảm ơn Brad Czerniak đã chỉ ra sự khác biệt này). Đây là một ví dụ mã đơn giản minh họa rõ ràng cách !important ảnh hưởng đến cách tự nhiên mà các kiểu được áp dụng

#example {
    font-size: 14px !important; 
}

#container #example {
    font-size: 10px;
}

Trong mẫu mã trên, phần tử có id là “ví dụ” sẽ có kích thước văn bản là 14px, do có thêm !important

Nếu không sử dụng !important, có hai lý do tại sao khối khai báo thứ hai đương nhiên phải có trọng số lớn hơn khối khai báo thứ nhất. Khối thứ hai nằm sau trong biểu định kiểu (i. e. nó được liệt kê thứ hai). Ngoài ra, khối thứ hai có tính đặc hiệu cao hơn (!important5 theo sau bởi !important6 thay vì chỉ !important6). Nhưng với việc bao gồm !important, quy tắc !important9 đầu tiên giờ đây có trọng lượng hơn

Một số điều cần lưu ý về khai báo !important

• Khi !important lần đầu tiên được giới thiệu trong CSS1, quy tắc tác giả có khai báo !important có trọng lượng hơn quy tắc người dùng có khai báo !important;
• Nếu !important được sử dụng trên thuộc tính tốc ký, điều này sẽ thêm “tầm quan trọng” cho tất cả các thuộc tính phụ mà thuộc tính tốc ký đại diện
• Từ khóa (hoặc câu lệnh) !important phải được đặt ở cuối dòng, ngay trước dấu chấm phẩy, nếu không nó sẽ không có hiệu lực (mặc dù khoảng trắng trước dấu chấm phẩy sẽ không phá vỡ nó)
• Nếu vì lý do cụ thể nào đó mà bạn phải viết cùng một thuộc tính hai lần trong cùng một khối khai báo, thì hãy thêm !important vào cuối thuộc tính đầu tiên, thuộc tính đầu tiên sẽ có trọng số hơn trong mọi trình duyệt ngoại trừ IE6 (điều này chỉ hoạt động như một IE6
• Trong IE6 và IE7, nếu bạn sử dụng một từ khác thay cho !important (chẳng hạn như !important8), quy tắc CSS vẫn sẽ được tăng thêm trọng số, trong khi các trình duyệt khác sẽ bỏ qua nó

Khi nào nên. quan trọng Được sử dụng?

Như với bất kỳ kỹ thuật nào, có những ưu và nhược điểm tùy thuộc vào hoàn cảnh. Vì vậy, khi nào nó nên được sử dụng, nếu bao giờ?

Không bao giờ

Không nên sử dụng khai báo !important trừ khi chúng thực sự cần thiết sau khi đã sử dụng hết tất cả các cách khác. Nếu bạn sử dụng !important vì lười biếng, để tránh gỡ lỗi thích hợp hoặc để gấp rút hoàn thành một dự án, thì bạn đang lạm dụng nó và bạn (hoặc những người kế thừa dự án của bạn) sẽ phải gánh chịu hậu quả

Nếu bạn chỉ đưa nó vào biểu định kiểu của mình một cách tiết kiệm, bạn sẽ sớm thấy rằng một số phần nhất định trong biểu định kiểu của bạn sẽ khó bảo trì hơn. Như đã thảo luận ở trên, tầm quan trọng của thuộc tính CSS xảy ra một cách tự nhiên thông qua tầng và tính đặc hiệu. Khi bạn sử dụng !important, bạn đang phá vỡ dòng chảy tự nhiên của các quy tắc của mình, tăng thêm trọng lượng cho các quy tắc không đáng có như vậy

Nếu bạn không bao giờ sử dụng !important, thì đó là dấu hiệu cho thấy bạn hiểu CSS và suy nghĩ cẩn thận về mã của mình trước khi viết mã

Điều đó đang được nói, câu ngạn ngữ cũ “không bao giờ nói không bao giờ” chắc chắn sẽ áp dụng ở đây. Vì vậy, dưới đây là một số cách sử dụng hợp pháp cho !important

Để hỗ trợ hoặc kiểm tra khả năng tiếp cận

Như đã đề cập, biểu định kiểu người dùng có thể bao gồm các khai báo !important, cho phép người dùng có nhu cầu đặc biệt chú ý đến các quy tắc CSS cụ thể sẽ hỗ trợ khả năng đọc và truy cập nội dung của họ

Người dùng có nhu cầu đặc biệt có thể thêm !important vào các thuộc tính kiểu chữ như !important9 để làm cho văn bản lớn hơn hoặc vào các quy tắc liên quan đến màu sắc để tăng độ tương phản của các trang web

Trong phần chụp màn hình bên dưới, trang chủ của Smashing Magazine được hiển thị với biểu định kiểu do người dùng xác định ghi đè kích thước văn bản thông thường, có thể được thực hiện bằng Thanh công cụ dành cho nhà phát triển của Firefox

Trong trường hợp này, kích thước văn bản có thể điều chỉnh mà không cần sử dụng !important, vì biểu định kiểu do người dùng xác định sẽ ghi đè biểu định kiểu của tác giả bất kể tính cụ thể. Tuy nhiên, nếu kích thước văn bản cho nội dung được đặt trong biểu định kiểu tác giả bằng cách sử dụng khai báo !important, thì biểu định kiểu người dùng không thể ghi đè cài đặt kích thước văn bản, ngay cả với một bộ chọn cụ thể hơn. Việc đưa vào !important giải quyết vấn đề này và duy trì khả năng điều chỉnh kích thước văn bản trong khả năng của người dùng, ngay cả khi tác giả đã lạm dụng !important

Để khắc phục tạm thời một vấn đề khẩn cấp

Sẽ có lúc xảy ra lỗi trong CSS của bạn trên trang web của khách hàng trực tiếp và bạn cần nhanh chóng áp dụng bản sửa lỗi. Trong hầu hết các trường hợp, bạn có thể sử dụng Firebug hoặc một công cụ dành cho nhà phát triển khác để theo dõi mã CSS cần sửa. Nhưng nếu sự cố xảy ra trên IE6 hoặc một trình duyệt khác không có quyền truy cập vào các công cụ gỡ lỗi, bạn có thể cần khắc phục nhanh bằng cách sử dụng !important

Sau khi bạn chuyển bản sửa lỗi tạm thời sang sản xuất (do đó làm cho khách hàng hài lòng), bạn có thể khắc phục sự cố cục bộ bằng một phương pháp dễ bảo trì hơn mà không làm hỏng tầng. Khi bạn đã tìm ra một giải pháp tốt hơn, bạn có thể thêm nó vào dự án và loại bỏ !important — và khách hàng sẽ chẳng khôn ngoan hơn chút nào

Để ghi đè các kiểu trong Fireorms hoặc Công cụ dành cho nhà phát triển khác

Việc kiểm tra một phần tử trong các công cụ dành cho nhà phát triển của Fireorms hoặc Chrome cho phép bạn chỉnh sửa kiểu một cách nhanh chóng, kiểm tra mọi thứ, gỡ lỗi, v.v. — mà không ảnh hưởng đến biểu định kiểu thực. Hãy xem ảnh chụp màn hình bên dưới, hiển thị một số phong cách của Smashing Magazine trong các công cụ dành cho nhà phát triển của Chrome

Quy tắc kiểu nền được đánh dấu có một đường kẻ xuyên qua nó, cho biết rằng quy tắc này đã bị quy tắc sau này ghi đè. Để áp dụng quy tắc này, bạn sẽ tìm thấy quy tắc sau và vô hiệu hóa nó. Ngoài ra, bạn có thể chỉnh sửa bộ chọn để làm cho nó cụ thể hơn, nhưng điều này sẽ mang lại cho toàn bộ khối khai báo tính cụ thể hơn, điều này có thể không được mong muốn

!important có thể được thêm vào một dòng để trả lại trọng số cho quy tắc bị ghi đè, do đó cho phép bạn kiểm tra hoặc gỡ lỗi sự cố CSS mà không cần thực hiện các thay đổi lớn đối với biểu định kiểu thực tế của bạn cho đến khi bạn giải quyết được sự cố

Đây là quy tắc kiểu tương tự với !important được thêm vào. Bạn sẽ nhận thấy dòng thông qua hiện đã biến mất, bởi vì quy tắc này hiện có nhiều trọng số hơn quy tắc trước đây đã ghi đè lên nó

Để ghi đè kiểu nội tuyến trong nội dung do người dùng tạo

Một khía cạnh khó chịu của quá trình phát triển CSS là khi nội dung do người dùng tạo bao gồm các kiểu nội tuyến, điều này sẽ xảy ra với một số trình soạn thảo WYSIWYG trong CMS. Trong tầng CSS, các kiểu nội tuyến sẽ ghi đè lên các kiểu thông thường, do đó, bất kỳ kiểu phần tử không mong muốn nào xảy ra thông qua nội dung được tạo sẽ khó thay đổi, nếu không muốn nói là không thể, bằng cách sử dụng các quy tắc CSS thông thường. Bạn có thể khắc phục sự cố này bằng cách sử dụng khai báo !important, vì quy tắc CSS có !important trong biểu định kiểu tác giả sẽ ghi đè CSS nội tuyến

Đối với biểu định kiểu in

Mặc dù điều này không cần thiết trong mọi trường hợp và có thể không được khuyến khích trong một số trường hợp vì những lý do tương tự đã đề cập trước đó, nhưng bạn có thể thêm khai báo !important vào biểu định kiểu chỉ in của mình để giúp ghi đè các kiểu cụ thể mà không phải lặp lại tính đặc hiệu của bộ chọn

Đối với các bài đăng trên blog được thiết kế độc đáo

Nếu bạn đã nghiên cứu các bài đăng trên blog được thiết kế độc đáo (nhiều nhà thiết kế gặp vấn đề với việc sử dụng “hướng nghệ thuật” cho kỹ thuật này, và đúng như vậy), như được giới thiệu trên Heart Directed, bạn sẽ biết rằng một công việc như vậy yêu cầu mỗi bài được thiết kế riêng biệt. . Bạn có thể tạo kiểu riêng cho một trang riêng lẻ bằng cách sử dụng mã được trình bày trong bài đăng này trên blog Digging Into Wordpress

Việc sử dụng !important có thể hữu ích trong trường hợp như vậy, cho phép bạn dễ dàng ghi đè các kiểu mặc định để tạo trải nghiệm độc đáo cho một bài đăng blog hoặc trang trên trang web của bạn mà không phải lo lắng về tính đặc hiệu CSS tự nhiên

Sự kết luận

Khai báo !important được dành riêng tốt nhất cho các nhu cầu đặc biệt và người dùng muốn làm cho nội dung web dễ truy cập hơn bằng cách dễ dàng ghi đè tác nhân người dùng mặc định hoặc biểu định kiểu tác giả. Vì vậy, bạn nên cố gắng hết sức để suy nghĩ trước về CSS của mình và tránh sử dụng !important bất cứ khi nào có thể. Ngay cả trong nhiều cách sử dụng được mô tả ở trên, việc bao gồm !important không phải lúc nào cũng cần thiết

Tuy nhiên, !important là CSS hợp lệ. Bạn có thể kế thừa một dự án mà các nhà phát triển trước đó đã sử dụng nó, hoặc bạn có thể phải nhanh chóng vá một thứ gì đó — để nó có ích. Chắc chắn sẽ có ích nếu hiểu rõ hơn về nó và sẵn sàng sử dụng nó nếu có nhu cầu

Bạn đã bao giờ sử dụng !important trong bảng định kiểu của mình chưa?

Bạn có thể sử dụng CSS quan trọng trong nội tuyến không?

Quan trọng có thể ghi đè CSS nội tuyến không?

Cái nào ưu tiên kiểu nội tuyến hoặc thẻ quan trọng?

Bạn có nên sử dụng quan trọng trong CSS?