Solution 1: use conditional import in HTML documents. For example, insert the following code into the HEAD:
1: <!--[if IE 6]>
2: <link rel="stylesheet" href="ie.css" type="text/css" />
3: <![endif]-->
4: <!--[if IE]>
5: <link type="text/css" media="screen" rel="stylesheet" href="js/colorbox-custom-ie.css" title="Cleanity" />
6: <![endif]-->
Solution 2: Use conditional import at the beginning of the CSS document, as shown in the following code:
1: [if SafMob] @import('iphone.css');
2: [if ! SafMob] @import('non-iphone.css');
The order in which the browser loads css:
1. Load the html page specified by the url
2. parse html
3. Remotely retrieve the css file referenced by the link tag
4. Load the obtained css file and obtain the xx.css file remotely when the @ import url ("xx.css" example code is used.
5.20.execute xx.css
You can use @ import to import up to 31 CSS files. Since each remote access to css files produces an http link, it is time-consuming. Therefore, it is best to use @ import as little as possible. 31, it is estimated that no project will use so much.