Diferencia entre @import y enlace en CSS

Question

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

El uso de @import

<style type="text/css">@import url(Path To stylesheet.css)</style> 

Uso de Enlace

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

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

Answer 1

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

Steve Souders escribió una extensa entrada en el blog comparar el impacto de ambos <link> y @import (y todo tipo de combinaciones de ellos) llamado "don’t use @import". Ese título habla mucho por sí mismo.

Yahoo! También lo menciona como uno de sus mejores prácticas de desempeño (co-escrito por Steve Souders): Choose <link> over @import

También, usando la etiqueta <link> permite definir "preferred" and alternate stylesheets. No puede hacer eso con @import.

Answer 2

Cuando uso la regla @import, generalmente es importar una hoja de estilo dentro de una hoja de estilo existente (aunque me disgusta hacerlo por 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.

Answer 3

No existe una diferencia real hoy en día, pero @import no se maneja correctamente en navegadores antiguos (Netscape 4, etc.), por lo que el @import hack se puede usar para ocultar reglas CSS 2 de estos navegadores antiguos.

De nuevo, a menos que esté admitiendo navegadores realmente antiguos, no hay ninguna diferencia.

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

Answer 4

Puede usar 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 viejo no puede (IE4, IE5 parcialmente) manejar la funcionalidad de importación. Además, algunas bibliotecas que analizan su xhtml/html pueden fallar al obtener la importación de la hoja de estilo. Tenga en cuenta que su importación debe venir antes que todas las demás declaraciones de CSS.

Answer 5

@import generalmente está destinado a ser usado en una hoja de estilo externa en lugar de en línea como en su ejemplo. Si realmente quería ocultar una hoja de estilo de navegadores muy antiguos, podría usar eso como un truco para evitar que usen esa hoja de estilo.  

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

Answer 6

Este artículo puede ser de utilidad aquí: 4 methods of adding CSS to HTML: link, embed, inline and import

Answer 7

El <enlace> directiva puede permitir múltiples css ser cargado e interpretado asyncronously.

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 el motor pueda procesarlo correctamente, ya que técnicamente es solo un script.

Muchos scripts de minimización de css (y lenguajes como less o sass) concatenan automáticamente los scripts vinculados en el script principal, ya que terminan causando menos sobrecarga de transferencia.

* (depende del navegador)