Tôi đang học một số CSS để chỉnh sửa mẫu dự án của mình. Tôi đến vấn đề này và không tìm thấy câu trả lời rõ ràng trên web. Có sự khác biệt giữa việc sử dụng @import hoặc liên kết trong CSS không?
Sử dụng @import
<style>@import url(Path To stylesheet.css)</style>Sử dụng liên kết
<link rel="stylesheet" href="Path To stylesheet.css">Cách tốt nhất để làm điều đó là gì? và tại sao? Cảm ơn!
Câu trả lời:
Về lý thuyết, điểm khác biệt duy nhất giữa chúng là @importcơ chế CSS bao gồm một biểu định kiểu và <link>cơ chế HTML. Tuy nhiên, các trình duyệt xử lý chúng theo cách khác nhau, mang lại <link>lợi thế rõ ràng về mặt hiệu suất.
Steve Souders đã viết một bài đăng trên blog mở rộng so sánh tác động của cả hai <link>và @import(và tất cả các loại kết hợp của chúng) được gọi là " không sử dụng @import ". Tiêu đề đó nói lên khá nhiều điều cho chính nó.
Yahoo! cũng đề cập đến nó như một trong những phương pháp hay nhất về hiệu suất của họ (do Steve Souders đồng tác giả): Chọn <link>qua @import
Ngoài ra, việc sử dụng <link>thẻ cho phép bạn xác định các biểu định kiểu "ưu tiên" và thay thế . Bạn không thể làm điều đó với @import.
Bạn có thể sử dụng lệnh nhập để nhập một CSS khác bên trong tệp css mà không thể thực hiện được với lệnh liên kết. Trình duyệt thực sự cũ không thể (IE4, IE5 một phần) xử lý chức năng nhập. Ngoài ra, một số thư viện phân tích cú pháp xhtml / html của bạn có thể không thành công trong việc nhập bảng định kiểu. Xin lưu ý rằng quá trình nhập của bạn phải đến trước tất cả các khai báo CSS khác.
Không có sự khác biệt thực sự ngày nay, nhưng @importkhông được xử lý chính xác bởi các trình duyệt cũ hơn (Netscape 4, v.v.), do đó, bản @importhack có thể được sử dụng để ẩn các quy tắc CSS 2 khỏi các trình duyệt cũ này.
Một lần nữa, trừ khi bạn đang hỗ trợ các trình duyệt thực sự cũ, không có sự khác biệt.
Tuy nhiên, nếu tôi là bạn, tôi sẽ sử dụng <link>biến thể trên các trang HTML của bạn, vì nó cho phép bạn chỉ định những thứ như loại phương tiện (in, màn hình, v.v.).
Lệnh <link> có thể cho phép nhiều css được tải và giải thích không đồng bộ.
chỉ thị @import buộc trình duyệt * phải đợi cho đến khi tập lệnh đã nhập được tải nội tuyến vào tập lệnh mẹ trước khi nó có thể được xử lý chính xác bởi bộ máy của nó, vì về mặt kỹ thuật, nó chỉ là một tập lệnh.
Nhiều tập lệnh tối thiểu hóa css (và các ngôn ngữ như less hoặc sass) sẽ tự động nối các tập lệnh được liên kết vào tập lệnh chính vì nó kết thúc bằng cách gây ra ít chi phí truyền hơn.
* (phụ thuộc vào trình duyệt)
Có thể sử dụng bài viết này tại đây: 4 phương pháp thêm CSS vào HTML: liên kết, nhúng, nội dòng và nhập
Khi tôi sử dụng quy tắc @import, thường là nhập một biểu định kiểu trong một biểu định kiểu hiện có (mặc dù tôi không thích làm điều đó từ đầu). Nhưng để trả lời câu hỏi của bạn, không, tôi không tin là có bất kỳ sự khác biệt nào. Chỉ cần đảm bảo đặt URL trong dấu ngoặc kép để tuân thủ XHTML hợp lệ.
@import thường được sử dụng trong một biểu định kiểu bên ngoài thay vì nội dòng như trong ví dụ của bạn. Nếu bạn thực sự muốn ẩn một biểu định kiểu khỏi các trình duyệt cũ, bạn có thể sử dụng biểu định kiểu đó như một phương pháp hack để ngăn họ sử dụng biểu định kiểu đó.
Nhìn chung, <link>thẻ được xử lý nhanh hơn quy tắc @import (có vẻ hơi chậm so với công cụ xử lý css).
Microsoft Internet Explorer 9 (MSIE9) dường như không xử lý @import đúng cách. Quan sát các mục này từ nhật ký Apache của tôi (địa chỉ IP bị ẩn nhưng whoisnói rằng nó thuộc sở hữu của chính Microsoft): HTML chính được liên kết với screen.css có
@import url("print.css") print;
@import url("speech.css") aural;mà bây giờ tôi sắp thay đổi linkthành các phần tử trong HTML, vì có vẻ như MSIE9 đưa ra hai yêu cầu không chính xác đến máy chủ, nhận được lỗi 404 mà tôi có thể thực hiện mà không có:
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Trident/5.0)" ssb22.user.srcf.netSau đó đã có các yêu cầu thích hợp cho các tệp này, nhưng chúng tôi có thể thực hiện mà không cần urllogic "bắn vào máy chủ trước, phân tích cú pháp sau".