Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > The difference and choice between @import and link_html/css_WEB-ITnose

The difference and choice between @import and link_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:50:46
Original
1273 people have browsed it

link

1 <head>2     <link rel="stylesheet" type="text/css" href="sheet1.css" media="all">3 </head>
Copy after login

@import

1 <style type="text/css">2     @import url(sheet1.css);      3 </style>
Copy after login

Difference

  • Loading order:

    • Link is to load the css file to the web page first, and then compile it. @import loads the html structure first and then the css file. If the network speed is slow, it will affect the visual effect.

    Link ensures that css files are downloaded in parallel, @import is downloaded one by one.

    In IE, link will block @import and extend the loading time. The use of multiple @imports will also disrupt the download order of resource files and cause js problems.

  • Compatibility: link is an xhtml tag and has no compatibility issues. @import is proposed by css2.1 so it does not support browsers before IE5.
  • DOM support: link supports DOM change style, @import does not support it.
  • In addition, the link tag can also call js files, declaration directories, etc. @import can only load css.

    • Select

  • Use link:

    • 　link to select the media to load. Due to the above loading, compatibility and IE reasons, ordinary sites should try to use link.

  • Use @import:

    • 　　　 Large portal websites (such as Taobao) linking multiple pages to the same css file will cause a slowdown, @import Style sheets can be transferred into css to facilitate modular management of css.

    Reference materials:

    High-performance website design: don’t use @import

    [Discussion] What are the advantages of @import calling style sheets?

    The difference between @import and link to external style sheet

    Related labels：
    @import与link的区别与选择
    source：php.cn
    Previous article：Detailed tutorial on getting started with css_html/css_WEB-ITnose Next article：Use template engine to render HTML interface_html/css_WEB-ITnose
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
    From 2024-04-29 11:01:01
    0
    3
    2037
    How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
    From 2024-04-23 00:22:19
    0
    11
    2197
    The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
    From 2024-04-19 15:37:47
    0
    1
    1851
    There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
    From 2024-04-18 23:52:34
    0
    1
    1744
    Where is the courseware about CSS mind mapping? Courseware
    From 2024-04-16 10:10:18
    0
    0
    1763
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template