Diferencia entre @import y link en CSS

118

Estoy aprendiendo algo de CSS para modificar la plantilla de mi proyecto. Llegué a este problema y no encontré una respuesta clara en la web. ¿Hay alguna diferencia entre usar @import o un enlace en CSS?

Uso de @import

<style>@import url(Path To stylesheet.css)</style>

Uso de enlace

<link rel="stylesheet" href="Path To stylesheet.css">

¿Cuál es la mejor manera de hacerlo? ¿y por qué? ¡Gracias!

css import hyperlink

— Omar Abid
fuente

142

En teoría, la única diferencia entre ellos es que @importes el mecanismo CSS para incluir una hoja de estilo y <link>el mecanismo HTML. Sin embargo, los navegadores los manejan de manera diferente, lo que brinda <link>una clara ventaja en términos de rendimiento.

Steve Souders escribió una extensa publicación de blog comparando el impacto de ambos <link>y @import(y todo tipo de combinaciones de ellos) llamado " no use @import ". Ese título habla por sí solo.

Yahoo! también lo menciona como una de sus mejores prácticas de rendimiento (en coautoría con Steve Souders): elija <link>sobre @import

Además, el uso de la <link>etiqueta le permite definir hojas de estilo "preferidas" y alternativas . No puedes hacer eso con @import.

— mercator
fuente

Gracias, buenos hipervínculos, especialmente el primero.

— Faisal Vali

6

Puede utilizar el comando de importación para importar otro CSS dentro de un archivo css que no es posible con el comando de enlace. El navegador realmente antiguo no puede (IE4, IE5 parcialmente) manejar la funcionalidad de importación. Además, algunas bibliotecas que analizan su xhtml / html podrían fallar al obtener la importación de la hoja de estilo. Tenga en cuenta que su importación debe ir antes que todas las demás declaraciones CSS.

— merkuro
fuente

6

Hoy en día no hay una diferencia real, pero @importlos navegadores más antiguos (Netscape 4, etc.) no lo manejan correctamente, por lo que el @importtruco se puede usar para ocultar las reglas de CSS 2 de estos navegadores antiguos.

Nuevamente, a menos que sea compatible con navegadores realmente antiguos, no hay diferencia.

Sin embargo, si yo fuera usted, usaría la <link>variante en sus páginas HTML, porque le permite especificar cosas como el tipo de medio (impresión, pantalla, etc.).

— zenazn
fuente

5

También es posible especificar los medios para las declaraciones @import.

— Georg Schölly

De Verdad? Supongo que podrías poner un tipo de medio en tu etiqueta de estilo, pero eso me parece un poco como un truco.

— zenazn

5

Puede hacer, por ejemplo, "@import url (style.css) screen, print", aunque IE7 y versiones anteriores no son compatibles con los tipos de medios.

— Mercator

5

La directiva <link> puede permitir que se carguen e interpreten múltiples CSS de forma asíncrona.

la directiva @import obliga al navegador * a esperar hasta que el script importado se cargue en línea con el script principal antes de que su motor pueda procesarlo correctamente, ya que técnicamente es solo un script.

Una gran cantidad de scripts de minimización de CSS (y lenguajes como less o sass) concatenarán automáticamente los scripts vinculados en el script principal, ya que terminan causando menos sobrecarga de transferencia.

* (depende del navegador)

— Ape-inago
fuente

2

Este artículo puede ser de utilidad aquí: 4 métodos para agregar CSS a HTML: vincular, incrustar, en línea e importar

— Matthew James Taylor
fuente

1

Cita: "Imaginemos que tenemos un sitio web de 1000 páginas y enlazamos a un archivo CSS de cada página del sitio. Ahora imaginemos que queremos agregar un segundo archivo CSS a todas esas páginas. Podríamos editar los 1000 archivos HTML y añadir un segundo enlace CSS o una forma mucho mejor sería importar el segundo archivo CSS desde el primer archivo. ¡Nos ahorramos muchas horas de trabajo! "

— Casebash

1

Cuando uso la regla @import, generalmente es para importar una hoja de estilo dentro de una hoja de estilo existente (aunque no me gusta hacerlo para empezar). Pero para responder a su pregunta, no, no creo que haya ninguna diferencia. Solo asegúrese de poner la URL entre comillas dobles para cumplir con XHTML válido.

— Barry Gallagher
fuente

1

@import generalmente está destinado a usarse en una hoja de estilo externa en lugar de en línea como en su ejemplo. Si realmente desea ocultar una hoja de estilo de navegadores muy antiguos, puede usarla como un truco para evitar que la usen.

En general, la <link>etiqueta se procesa más rápidamente que la regla @import (que aparentemente es algo lenta en lo que respecta al motor de procesamiento css).

— Gabriel Hurley
fuente

0

Microsoft Internet Explorer 9 (MSIE9) no parece manejar @import correctamente. Observe estas entradas de mi registro de Apache (dirección IP oculta pero whoisdijo que era propiedad de Microsoft): el HTML principal vinculado a screen.css que tenía

@import url("print.css") print;
@import url("speech.css") aural;

que ahora estoy a punto de cambiar a linkelementos en el HTML, porque parece que MSIE9 emite dos solicitudes incorrectas al servidor, obteniendo errores 404 que podría prescindir:

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

No eran las solicitudes apropiadas de estos archivos después, pero podemos prescindir de esta "disparar al primer servidor, de análisis urldespués de" la lógica.

— Silas S. Brown
fuente