visita - Diferencia entre @import y link en CSS
html and css design and build websites pdf (7)
Estoy aprendiendo algo de CSS para ajustar 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?
Uso de @import
<style>@import url(Path To stylesheet.css)</style>
Uso del enlace
<link rel="stylesheet" href="Path To stylesheet.css">
¿Cuál es la mejor manera de hacerlo? ¿y por qué? ¡Gracias!
@import generalmente está destinado a ser utilizado en una hoja de estilo externa en lugar de en línea como en su ejemplo. Si realmente deseaba ocultar una hoja de estilo de navegadores muy antiguos, podría usarla 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).
Cuando uso la regla @import, generalmente es importar una hoja de estilo dentro de una hoja de estilos 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.
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 manejan de manera diferente, dando a <link> una clara ventaja en términos de rendimiento.
Steve Souders escribió una extensa publicación de blog que comparaba el impacto de <link> y @import (y todo tipo de combinaciones de ellos) llamado " do not use @import ". Ese título habla mucho por sí mismo.
Yahoo! también lo menciona como una de sus mejores prácticas de desempeño (en coautoría con Steve Souders): elija <link> sobre @import
Además, usar la etiqueta <link> te permite definir hojas de estilo "preferidas" y alternativas . No puedes hacer eso con @import .
Este artículo puede ser útil aquí: 4 métodos para agregar CSS a HTML: enlace, incrustación, en línea e importación
Hoy en día no hay una diferencia real, pero @import no se maneja correctamente en navegadores más antiguos (Netscape 4, etc.), por lo que @import hack se puede usar para ocultar las reglas de CSS 2 de estos navegadores antiguos.
Nuevamente, a menos que esté apoyando navegadores realmente antiguos, no hay diferencia.
Sin embargo, si fuera usted, usaría la variante <link> en sus páginas HTML, porque le permite especificar cosas como el tipo de medio (impresión, pantalla, etc.).
La directiva <link> puede permitir cargar e interpretar múltiples css asincronously.
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)
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.