Việc sử dụng @namespace trong CSS là gì?

Question

Từ doc, tôi thấy việc sử dụng không gian tên như dưới đây:

@namespace foo url(http://www.example.com); 
foo|h1 { color: blue } 

Nhưng tôi muốn biết thêm về việc này. tại sao chúng ta sử dụng nó?

Answer 1

Trong ví dụ đã cho, quy tắc color: blue sẽ chỉ được giới hạn ở các thành phần h1 trong không gian tên foo (được liên kết bởi url(example.com)).

Theo hiểu biết của tôi, nó được coi là không thường xuyên cần thiết. Và nó chắc chắn trông kỳ lạ.

Dưới đây là một bản tóm tắt tốt đẹp của ứng dụng của nó: http://nimbupani.com/spacing-out-on-css-namespaces.html

Điều duy nhất nó định nghĩa là làm thế nào để khai báo một XML namespace tiền tố trong CSS. Điều đó là cần thiết nếu bạn muốn sử dụng các bộ chọn chỉ phù hợp với các phần tử trong một không gian tên nhất định.

Ví dụ: SVG chia sẻ một số yếu tố phổ biến (ví dụ: <a>) và thuộc tính CSS với HTML có XML và HTML. Nếu bạn đang sử dụng cùng một biểu định kiểu cho cả tài liệu HTML và SVG, thì tốt nhất là tách riêng các kiểu cho SVG và HTML để ngăn chặn bất kỳ trùng lặp nào. ...

Dưới đây là một bước-by-step sự cố tốt đẹp của bộ phận của nó:

@namespace tuyên bố không gian tên mặc định và liên kết với một không gian tên để một tiền tố namespace. Không gian tên mặc định được áp dụng cho các tên không có thành phần không gian tên rõ ràng. … Nếu bạn khai báo một quy tắc @namespace với một tiền tố, bạn có thể sử dụng tiền tố trong các tên đủ điều kiện không gian tên. ...

Và cuối cùng, đây là MDN của doc: https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace

Nguyên tắc @namespace là tại-quy tắc xác định không gian tên XML sẽ được sử dụng trong style sheet. Các không gian tên được định nghĩa có thể được sử dụng để giới hạn các đối tượng địa lý theo không gian tên đó là phổ, loại và thuộc tính. Quy tắc @namespace thường chỉ hữu ích khi xử lý một tài liệu XML có chứa nhiều không gian tên — ví dụ, một tài liệu XHTML được nhúng SVG.

Quy tắc @namespace có thể được sử dụng để xác định không gian tên mặc định cho biểu định kiểu. Khi một không gian tên mặc định được định nghĩa, tất cả các bộ chọn kiểu phổ quát và kiểu (nhưng không phải là bộ chọn thuộc tính, xem lưu ý bên dưới) chỉ áp dụng cho các phần tử trên không gian tên đó.

Quy tắc @namespace cũng có thể được sử dụng để xác định tiền tố không gian tên cho một biểu định kiểu. Khi một phổ, loại hoặc thuộc tính bộ chọn được đặt trước tiền tố không gian tên, thì bộ chọn đó chỉ khớp với không gian tên (và không chỉ tên trong trường hợp bộ chọn loại hoặc thuộc tính) của phần tử hoặc thuộc tính kết quả phù hợp.

Khi sử dụng HTML không phải XML, các phần tử đã biết sẽ tự động được chỉ định không gian tên.Điều này có nghĩa là các phần tử HTML sẽ hoạt động như thể chúng nằm trong vùng tên XHTML, ngay cả khi không có thuộc tính xmlns ở bất kỳ đâu trong tài liệu HTML.

Lưu ý rằng trong XML, trừ khi tiền tố được xác định trực tiếp trên thuộc tính, thuộc tính đó không có không gian tên. Nói cách khác, các thuộc tính không kế thừa vùng tên của phần tử mà chúng đang ở trên đó. Để phù hợp với hành vi này, không gian tên mặc định trong CSS không áp dụng cho các bộ chọn thuộc tính.

Answer 2

Từ MSDN

Các namespace HTML được xử lý đặc biệt khi duyệt XML với CSS. Các phần tử từ không gian tên HTML được hiển thị khi chúng xuất hiện trong HTML. Điều này cho phép truy cập vào các khả năng chưa được CSS cung cấp. Một số ví dụ về các phần tử HTML hữu ích để nhúng là <TABLE>, <A>, <IMG>, <SCRIPT> và <STYLE>.

Ví dụ: bạn có thể thêm liên kết và biểu trưng vào mẫu đánh giá nhà hàng sau đây. Trước tiên, bạn phải khai báo không gian tên HTML ở đầu tài liệu và sau đó sử dụng tiền tố HTML trên các phần tử HTML được nhúng. HTML nhúng theo cách này phải là XML được định dạng tốt, do đó phần tử <IMG> cần thẻ kết thúc thu nhỏ.

<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional"> 
    ... 
    <restaurant> 
    <name>Red Apple Inn</name> 
    <logo> 
     <HTML:A href="javascript:alert('Visit the Red Apple Inn!')"> 
     <HTML:IMG src="red-apple.gif" height="50" width="200"/> 
     </HTML:A> 
    </logo> 
    ... 

Trong Microsoft® Internet Explorer, tiền tố phải duy trì HTML hoặc html để các phần tử được hiểu là thành phần HTML.

Một khối <HTML:STYLE> có thể được sử dụng để nhúng một tờ định kiểu CSS trong một tài liệu XML. Khối này sẽ tăng thêm bất kỳ trang mẫu nào được chỉ dẫn bởi các hướng dẫn xử lý trang tính kiểu. Khi không có bảng định kiểu bên ngoài, vẫn phải có hướng dẫn xử lý trang tính kiểu để chỉ ra rằng tài liệu XML sẽ được hiển thị bằng ngôn ngữ trang tính kiểu CSS, mặc dù không có thuộc tính href nào được chỉ định.

Ví dụ sau đây cho biết cách biểu định kiểu review.css có thể được nhúng vào tài liệu XML bằng không gian tên HTML, phần tử <HTML:STYLE> và hướng dẫn xử lý biểu định kiểu không có thuộc tính href. HTML

<?xml version="1.0"?> 
<?xml-stylesheet type="text/css"?> 
<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional"> 
    <HTML:STYLE> 
    story 
    { 
     display: block; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: small; 
     width: 30em; 
    } 
    restaurant 
    { 
     display: block; 
     padding: 1.2em; 
     font-size: x-small; 
     margin-bottom: 1em; 
    } 
    ... 
    </HTML:STYLE> 
    <restaurant> 
    ...