How to realize the judging condition of importing css file

This article mainly shows you the "how to achieve the import of css file judgment conditions", the content is easy to understand, clear, hope to help you resolve doubts, the following let Xiaobian lead you to study and learn "how to import css files to determine the use of conditions" this article.

Scenario 1: use conditional import in HTML documents, such as inserting the following code into HEAD:

The code is as follows:

Scenario 2: use conditional import at the beginning of the CSS document, as shown in the following code:

The code is as follows:

[if SafMob]

@ import ('iphone.css')

[if! SafMob]

@ import ('non-iphone.css')

The order in which browsers load css:

1. Load the html page specified by url

two。 Parsing html

3. Get the css file referenced by the link tag remotely

4. Load the css file obtained by execution. If you encounter code like @ import url ("xx.css"), you will get xx.css remotely.

5. Load and execute xx.css

You can import up to 31 CSS files through @ import. Since each remote acquisition of css files will generate http links, which is time-consuming, it is best to use @ import as little as possible. 31, it is estimated that no project will use so much.

The above is all the contents of the article "how to realize the judgment conditions for the use of importing css files". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!