Tại sao chúng ta sử dụng <script> cho các tập lệnh mà không sử dụng <style> cho CSS bên ngoài?

76

Một người họ hàng của tôi, người bắt đầu học Phát triển Web đã hỏi tôi câu hỏi này.

Tại sao <script src="min.js"></script>và <link rel="stylesheet" href="min.css">? Tại sao không <style href="min.css"></style>. Tại sao chúng ta sử dụng linkthẻ để thêm CSS bên ngoài vào trang nhưng khi chúng ta liên kết CSS với trang nhưng lại sử dụng <style>...</style>khi viết CSS bên trong <head>?

Tôi nói với anh ấy rằng đó là do thông số kỹ thuật. Có thêm thông tin nào để cung cấp cho anh ta không?

javascript  css  html  w3c 
— Jitendra Vyas
nguồn
6
Bạn cũng có thể làm điều này: <style type="text/css">@import url("style.css");</style>.
— Rocket Hazmat
1
@Rocket nhưng nó không nên bởi YSlow đội developer.yahoo.com/performance/rules.html#csslink
— Jitendra Vyas
1
họ đã đề cập Trong IE, @import hoạt động giống như sử dụng <link> ở cuối trang, vì vậy tốt nhất bạn không nên sử dụng nó.
— Jitendra Vyas
3
Tôi chỉ nghĩ rằng tôi sẽ chỉ ra một cách khác để làm điều đó, chỉ để làm cho mọi thứ thú vị hơn.
— Rocket Hazmat
6
IE, tốt nhất là không nên sử dụng nó. FIFY
— Rocket Hazmat

Câu trả lời:

45

Đó là lịch sử ... trùng hợp? Bạn có thể giới thiệu anh ta đọc phần Quá khứ của lặnintohtml5.info , nơi có một số câu chuyện thú vị, thực sự là thư từ qua thư, giữa các nhà phát triển web. Các nhà phát triển web có nghĩa là trên thực tế , họ đang phát triển trang Web mà chúng ta thấy ngày nay;)

Tức <img>là chúng ta đã quen với thẻ:

<IMG SRC="file://foobar.com/foo/bar/blargh.xbm">

có thể là:

<ICON name="NoEntry" href="http://note/foo/bar/NoEntry.xbm">

hoặc là

<A HREF="..." INCLUDE>See photo</A>

hoặc là

<INCLUDE HREF="...">

nhưng cuối cùng các nhà phát triển quyết định gắn bó với <img>, điều này đã được triển khai :

Chúng tôi không sẵn sàng hỗ trợ INCLUDE / EMBED vào thời điểm này. … Vì vậy, chúng tôi có thể sẽ đi với (không phải ICON, vì không phải tất cả các hình ảnh nội tuyến đều có thể được gọi là biểu tượng một cách có ý nghĩa). Hiện tại, hình ảnh nội tuyến sẽ không phải là loại nội dung rõ ràng; hiện tại, chúng tôi dự định sẽ hỗ trợ điều đó (cùng với sự thích ứng chung của MIME). Trên thực tế, các thói quen đọc hình ảnh mà chúng tôi hiện đang sử dụng để tìm ra định dạng hình ảnh một cách nhanh chóng, vì vậy phần mở rộng tên tệp thậm chí sẽ không quan trọng.

Tôi không biết câu trả lời trực tiếp cho câu hỏi của bạn, nhưng tôi cũng khá tò mò về <link>thẻ. Tìm câu trả lời có lẽ sẽ bao gồm việc đào một số kho lưu trữ web.

— Xaerxess
nguồn
1
Tôi đã định viết một câu trả lời tương tự - nó có lẽ chỉ là một thứ thực hiện. Một trình duyệt đã triển khai nó theo cách này trình duyệt kia thực hiện theo cách khác và cuối cùng thì một trình duyệt đã tham gia vào đặc tả. Nhưng tôi thực sự rất thích nghe từ một người đã nhận phần của mình viết các thông số kỹ thuật trong thời gian qua.
— easwee
1
Bất cứ điều gì đã được quyết định trong quá khứ thì vẫn ổn nhưng W3C có thể thay đổi trong tương lai, ví dụ như trong HTML 5 text/cssvà text/javascriptkhông bắt buộc.
— Jitendra Vyas,
Tôi thích câu trả lời này nhưng đây không phải là câu trả lời cho câu hỏi thực sự trong đầu. Chúng ta có thể thu hút nhiều người bình luận về vấn đề này hơn để chúng ta có thể tìm ra câu trả lời thực sự không?
— brainkim
27

Có một sự khác biệt, ít nhất là theo quan điểm của W3C.

Một <style>phần tử giới thiệu một khối quy tắc CSS áp dụng cho tài liệu hiện tại. Tuy nhiên, các biểu định kiểu bên ngoài thực sự được coi là toàn bộ tài liệu liên quan đến trang hiện tại và tác nhân người dùng có quyền bỏ qua các tài liệu đó, tùy thuộc vào thuộc tính typevà mediacủa liên kết. Ví dụ:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Trong tình huống này, tác nhân người dùng thường chỉ đi theo một trong các liên kết, liên kết screen(đối với kết xuất thông thường) hoặc liên kết print(đối với in ấn). Ý tưởng là để bảo toàn băng thông bằng cách chỉ tải xuống tài nguyên thích hợp, thay vì tìm nạp mọi thứ và lọc trên loại phương tiện sau đó.

Điều này được đề cập trong thông số kỹ thuật:

Khi LINKphần tử liên kết biểu định kiểu bên ngoài với tài liệu, typethuộc tính chỉ định ngôn ngữ biểu định kiểu và media thuộc tính chỉ định phương tiện hoặc phương tiện hiển thị dự kiến. Tác nhân người dùng có thể tiết kiệm thời gian bằng cách chỉ truy xuất từ ​​mạng những biểu định kiểu áp dụng cho thiết bị hiện tại.

— Frédéric Hamidi
nguồn
Nhưng chúng tôi cũng có thể xác định phương tiện bên trong tệp css bên ngoài. Được ưa thích những ngày này để tiết kiệm http yêu cầu
— Jitendra Vyas
1
@Jitendra, thực sự là chúng tôi có thể, nhưng sau đó chúng tôi phải tải xuống tệp CSS để kiểm tra loại phương tiện của nó. Việc đưa thông tin đó vào <link>phần tử cho phép tác nhân người dùng hoàn toàn bỏ qua tài nguyên mà không cần phải tải nó trước khi nó có thể quyết định làm như vậy.
— Frédéric Hamidi
1
— Knu
2
Nhưng các yếu tố kiểu cũng hỗ trợ mediathuộc tính như, <style type="text/css" media="screen">Chúng ta có thể có hai yếu tố kiểu, một cho media="screen"và một cho media="print". Tôi không hiểu tại sao srcthuộc tính không được phép cho phần tử kiểu.
— user31782
2
@ user31782, bạn có thể kiến ​​nghị W3C nếu bạn muốn, nhưng mọi người ở đây không thể làm gì với nó.
— Pointy
4

Cả hai đều có ý nghĩa cơ bản giống hệt nhau và bạn đã phát hiện ra một loại sự không nhất quán trong HTML. Nguyên nhân của điều này là các tiêu chuẩn dựa trên việc triển khai các trình duyệt khác nhau. Các trình duyệt khác nhau đưa ra các thuộc tính trong các thẻ khác nhau và W3C chỉ quyết định giữ một số điểm không nhất quán để duy trì khả năng tương thích ngược.

Các phần tử sử dụng src:script img iframe input video frame

Các phần tử sử dụng href:a link base

— Peter Olson
nguồn
7
Không có sự mâu thuẫn trong HTML. srcđược sử dụng cho các phần tử được thay thế. Các phần tử đó là một phần của tài liệu HTML. Trong khi, hrefđược sử dụng để liên kết đến các tài liệu khác. Ở đây, chúng tôi chỉ định một 'mối quan hệ' của tài liệu bên ngoài với tài liệu hiện tại.
— apnerve
2
@FelipeElia: Thực ra, tôi muốn lập luận rằng việc sử dụng <script>'s srcthuộc tính không phải là một liên kết nhưng một sự thay thế. Trang sẽ hoạt động giống hệt nhau cho dù bạn sử dụng srchay bạn bao gồm nội dòng tập lệnh (sẽ được coi là "thay thế").
— rinogo
1
@rinogo yep, bạn có một điểm tốt ở đó! Giờ nghĩ lại, hình ảnh cũng đúng. Mặc dù chúng tôi thường trỏ đến các tệp khác, nhưng chúng tôi luôn có thể nhúng chúng với base64, điều không đúng với các phần tử href. Để sử dụng CSS nội tuyến, chúng ta phải sử dụng <style> thay vì <link>.
— Felipe Elia
1

Các <link>thẻ được sử dụng để "liên kết" các văn bản khác với hiện tại, và mô tả mối quan hệ của nó, hoặc rel, với nó.

Bạn cũng có thể sử dụng <link>để liên kết những thứ khác với tài liệu. Ví dụ: biểu tượng yêu thích:

<link rel="shortcut icon" href="favicon.ico" />
— Rocket Hazmat
nguồn
3
Đồng ý: liên kết có thể được sử dụng để liên kết đến nhiều thứ (một cho mỗi loại rel), vì vậy điểm thực sự đáng ngạc nhiên về giao diện là tại sao không sử dụng linkcho các tập lệnh như được hỏi ở đây .
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
1

Lý do có thể xảy ra link refvới style:

linkchỉ có thể tiếp tục head, khi "Nội dung siêu dữ liệu" được cho phép, thông thường head,

stylekhông thể chuyển sang bodyHTML5 trước đây (bây giờ bạn có thể với scoped, nhưng vẫn không thể chuyển sang kiểu bên ngoài). Do đó, sự lựa chọn giữa link refvà style srclà tùy ý.

script, tuy nhiên, có thể đã bao gồm một tập lệnh bên ngoài trong bodyHTML5 trước đó, vì vậy phải có script src. Nhưng vì nó phải tồn tại, tại sao không cho phép nó ở trong headcùng (nơi scriptđã được phép), và không cho phép link rel=scriptđể tránh trùng lặp?

— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
nguồn
Đó là một câu trả lời tốt đẹp, nhưng sử dụng <a> href và nó đã luôn luôn có thể có nó trong cơ thể ...
— Felipe Elia
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.