A Deeper Look at the Differences Between Link and @import
|
There are three main ways to use CSS in a page: adding style attribute values inline, calling them inline in the page header, and calling them through external links. There are two types of external references: link and @import. There are two ways to reference CSS externally: link and @import: XML/HTML Code Copy code The code is as follows:<link rel="stylesheet" rev="stylesheet" href="CSS file" type="text/css" media="all" /> XML/HTML Code Copy code The code is as follows:<style type="text/css" media="screen"> @import url("CSS file"); </style> Both are ways of externally referencing CSS, but there are some differences : Difference 1: link is an XHTML tag. In addition to loading CSS, it can also define other things such as RSS; @import belongs to the CSS category and can only load CSS. Difference 2: When link references CSS, it is loaded at the same time as the page is loaded; @import needs to be loaded after the page is fully loaded. Difference 3: link is an XHTML tag and has no compatibility issues; @import was proposed in CSS2.1 and is not supported by lower version browsers. Difference 4: ink supports using Javascript to control DOM to change styles, while @import does not. Supplement: Optimal writing method for @import There are generally the following ways to write @import: @import 'style.css' // Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 do not recognize @import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4 do not recognize @import url(style.css) //Windows NS4, Macintosh NS4 does not recognize @import url('style.css') // Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 do not recognize @import url("style.css") //Windows NS4, Macintosh NS4 do not recognize From the above analysis, we know that @import url(style.css) and @import url("style.css") are the best choices, with the most compatible browsers. From the perspective of byte optimization, @import url(style.css) is the most recommended. The difference between link and @import in external reference CSS I just finished writing several ways to load CSS in XHTML these two days. Among them, external references to CSS are divided into two ways: link and @import. Essentially, both methods are for loading CSS files, but there are subtle differences. Difference 1 : The difference between our ancestors. link is an XHTML tag, while @import is completely a method provided by CSS. In addition to loading CSS, the link tag can also do many other things, such as defining RSS, defining rel connection attributes, etc., while @import can only load CSS. Difference 2 : Difference in loading order. When a page is loaded (that is, when it is browsed by the viewer), the CSS referenced by the link will be loaded at the same time, while the CSS referenced by @import will wait until the entire page is downloaded before being loaded. So sometimes when you browse a page that uses @import to load CSS, there will be no style at first (it will flicker), and it is quite obvious when the network speed is slow (Dream City loads CSS by using @import. When I browse the Dream City webpage while downloading, the above problem will occur). Difference 3 : Difference in compatibility. Since @import was proposed in CSS2.1, it is not supported by older browsers. @import can only be recognized by IE5 and above, while the link tag does not have this problem. Difference 4 : Difference when using DOM to control styles. When using javascript to control dom to change the style, you can only use the link tag, because @import is not controllable by dom. These are basically the differences (if there are any other differences, please tell me and I will add them), the rest are the same. From the above analysis, it is better to use the link tag. When loading CSS files in standard web page creation, you should also select the media to be loaded, such as screen, print, or all. I will introduce this to you in the CSS advanced tutorial. Note: 1. Netizen comehope pointed out another difference in his message. Difference 5: @import can be used to import other style sheets into CSS. For example, you can create a main style sheet and import other style sheets into the main style sheet, such as: main.css Copy code The code is as follows:———————- @import "sub1.css"; @import "sub2.css"; sub1.css ———————- p {color:red;} sub2.css ———————- .myclass {color:blue} This is more conducive to modification and expansion. Monkey Tip: There is a disadvantage of doing this, which is that it will generate too many HTTP requests to the website server. Previously it was one file, but now it is two or more files, which increases the pressure on the server. It should be used with caution for websites with a large number of visitors. If you are interested, you can look at the homepage or column homepage code of websites like Sina. They always write CSS or JS directly in HTML without using external files. |
<<: The functions and differences between disabled and readonly
>>: How to find and delete duplicate rows in MySQL
Recommend
How to convert JavaScript array into tree structure
1. Demand The backend provides such data for the ...
HTML tag meta summary, HTML5 head meta attribute summary
Preface meta is an auxiliary tag in the head area...
CentOS 6 uses Docker to deploy redis master-slave database operation example
This article describes how to use docker to deplo...
Front-end development must learn to understand HTML tags every day (1)
2.1 Semanticization makes your web pages better u...
Detailed graphic instructions for downloading and installing the unzipped version of MySQL 5.7.18 and starting the MySQL service
Because the distribution package of MySQL Communi...
MySQL full-text search usage examples
Table of contents 1. Environmental Preparation 2....
How to read the regional information of IP using Nginx and GeoIP module
Install GeoIP on Linux yum install nginx-module-g...
JavaScript canvas Tetris game
Tetris is a very classic little game, and I also ...
In-depth understanding of the specified IE browser rendering method
<meta http-equiv="X-UA-Compatible" c...
VMware15 installation of Deepin detailed tutorial (picture and text)
Preface When using the Deepin user interface, it ...
HTML&CSS&JS compatibility tree (IE, Firefox, Chrome)
What is a tree in web design? Simply put, clicking...
Initialize Ubuntu 16.04 in three minutes, deploy Java, Maven, and Docker environments
Fast-Linux project address: https://gitee.com/uit...
In-depth analysis of JDBC and MySQL temporary tablespace
background Temporary tablespaces are used to mana...
mysql startup failure problem and scenario analysis
1. One-stop solution 1. Problem analysis and loca...
JavaScript uses setTimeout to achieve countdown effect
In order to enhance the ability to write JavaScri...