Si ha echado un vistazo a la Web y ha visto el código de varias páginas web, una cosa que puede haber notado es que diferentes sitios incluyen sus archivos CSS externos de diferentes maneras – ya sea usando el enfoque @import o enlazando a ese archivo CSS. ¿Cuál es la diferencia entre @import y link para CSS y cómo decidir cuál es el mejor para ti? Echemos un vistazo!
Índice de contenidos
La diferencia entre @import y
Antes de decidir qué método utilizar para incluir sus hojas de estilo, debe entender para qué se utilizarán los dos métodos.
– Vincular es el primer método para incluir una hoja de estilo externa en sus páginas Web. Tiene la intención de enlazar su página Web con su hoja de estilo. Se agrega a la de su documento HTML de esta manera:
@import - Importar le permite importar una hoja de estilo a otra. Esto es ligeramente diferente al escenario de enlace porque puede importar hojas de estilo dentro de una hoja de estilo enlazada. Si incluye un @import en la cabecera de su documento HTML, está escrito de la siguiente manera:
@import url("styles.css");
>.
Desde el punto de vista de los estándares, no hay diferencia entre enlazar con una hoja de estilo externa o importarla. Cualquiera de las dos formas es correcta y funcionará igual de bien (en la mayoría de los casos). Sin embargo, hay algunas razones por las que usted podría querer usar una sobre la otra.
¿Por qué usar @import?
Hace muchos años, la razón más común que se dio para usar @import en su lugar (o junto con) es porque los navegadores antiguos no reconocían @import, por lo que se podían ocultar los estilos de ellos. Al importar sus hojas de estilo, usted las pondría a disposición de los navegadores más modernos y compatibles con los estándares, mientras que las "ocultaba" de las versiones más antiguas de los navegadores.
Otro uso para el método @import es utilizar múltiples hojas de estilo en una página, mientras que sólo se incluye un único enlace en la página de su documento. Por ejemplo, una corporación puede tener una hoja de estilo global para cada página del sitio, con subsecciones con estilos adicionales que sólo se aplican a esa subsección. Al enlazar a la hoja de estilo de la subsección e importar los estilos globales en la parte superior de esa hoja de estilo, no tiene que mantener una hoja de estilo gigantesca con todos los estilos para el sitio y cada subsección. El único requisito es que cualquier regla @import debe estar antes que el resto de sus reglas de estilo. Además, asegúrese de recordar que la herencia puede seguir siendo un problema.
¿Por qué usar ?
La razón número uno para usar hojas de estilo enlazadas es proporcionar hojas de estilo alternativas para sus clientes. Los navegadores como Firefox, Safari y Opera soportan este atributo y, cuando hay uno disponible, permiten a los espectadores cambiar entre ellos. También puede utilizar un conmutador JavaScript para cambiar entre hojas de estilo en IE. Esto se utiliza más a menudo con Zoom Layouts con fines de accesibilidad.
Una de las desventajas de usar @import es que si tienes una muy simple con sólo la regla @import en ella, tus páginas pueden mostrar un "flash de contenido sin estilo" (FOUC) mientras se están cargando. Esto puede ser irritante para sus espectadores. Una solución sencilla para esto es asegurarse de que tiene al menos un elemento adicional en su cabeza.
¿Qué pasa con el tipo de medio?
Muchos escritores afirman que puede utilizar el tipo de medio para ocultar hojas de estilo de los navegadores más antiguos. A menudo, mencionan esto como una ventaja de usar @import o , pero la verdad es que puedes configurar el tipo de medio con cualquiera de los dos métodos, y los navegadores más antiguos que no soportan los tipos de medio no los verán en ninguno de los dos casos.
Entonces, ¿qué método debe utilizar?
Preferimos usar y luego importar hojas de estilo en hojas de estilo externas, como hacen la mayoría de los diseñadores web hoy en día. De esta manera, usted sólo tiene una o dos líneas de código para ajustar en sus documentos HTML. Pero la conclusión es que depende de ti. Si te sientes más cómodo con @import, ¡entonces hazlo! Ambos métodos son compatibles con los estándares y, a menos que esté pensando en admitir navegadores realmente antiguos, no hay una razón de peso para usar ninguno de los dos.
Editado por Jeremy Girard el 2/7/17
@import - Importar le permite importar una hoja de estilo a otra. Esto es ligeramente diferente al escenario de enlace porque puede importar hojas de estilo dentro de una hoja de estilo enlazada. Si incluye un @import en la cabecera de su documento HTML, está escrito de la siguiente manera:
@import url("styles.css");
>.
Desde el punto de vista de los estándares, no hay diferencia entre enlazar con una hoja de estilo externa o importarla. Cualquiera de las dos formas es correcta y funcionará igual de bien (en la mayoría de los casos). Sin embargo, hay algunas razones por las que usted podría querer usar una sobre la otra.
¿Por qué usar @import?
Hace muchos años, la razón más común que se dio para usar @import en su lugar (o junto con) es porque los navegadores antiguos no reconocían @import, por lo que se podían ocultar los estilos de ellos. Al importar sus hojas de estilo, usted las pondría a disposición de los navegadores más modernos y compatibles con los estándares, mientras que las "ocultaba" de las versiones más antiguas de los navegadores.
Otro uso para el método @import es utilizar múltiples hojas de estilo en una página, mientras que sólo se incluye un único enlace en la página de su documento. Por ejemplo, una corporación puede tener una hoja de estilo global para cada página del sitio, con subsecciones con estilos adicionales que sólo se aplican a esa subsección. Al enlazar a la hoja de estilo de la subsección e importar los estilos globales en la parte superior de esa hoja de estilo, no tiene que mantener una hoja de estilo gigantesca con todos los estilos para el sitio y cada subsección. El único requisito es que cualquier regla @import debe estar antes que el resto de sus reglas de estilo. Además, asegúrese de recordar que la herencia puede seguir siendo un problema.
¿Por qué usar ?
La razón número uno para usar hojas de estilo enlazadas es proporcionar hojas de estilo alternativas para sus clientes. Los navegadores como Firefox, Safari y Opera soportan este atributo y, cuando hay uno disponible, permiten a los espectadores cambiar entre ellos. También puede utilizar un conmutador JavaScript para cambiar entre hojas de estilo en IE. Esto se utiliza más a menudo con Zoom Layouts con fines de accesibilidad.
Una de las desventajas de usar @import es que si tienes una muy simple con sólo la regla @import en ella, tus páginas pueden mostrar un "flash de contenido sin estilo" (FOUC) mientras se están cargando. Esto puede ser irritante para sus espectadores. Una solución sencilla para esto es asegurarse de que tiene al menos un elemento adicional en su cabeza.
¿Qué pasa con el tipo de medio?
Muchos escritores afirman que puede utilizar el tipo de medio para ocultar hojas de estilo de los navegadores más antiguos. A menudo, mencionan esto como una ventaja de usar @import o , pero la verdad es que puedes configurar el tipo de medio con cualquiera de los dos métodos, y los navegadores más antiguos que no soportan los tipos de medio no los verán en ninguno de los dos casos.
Entonces, ¿qué método debe utilizar?
Preferimos usar y luego importar hojas de estilo en hojas de estilo externas, como hacen la mayoría de los diseñadores web hoy en día. De esta manera, usted sólo tiene una o dos líneas de código para ajustar en sus documentos HTML. Pero la conclusión es que depende de ti. Si te sientes más cómodo con @import, ¡entonces hazlo! Ambos métodos son compatibles con los estándares y, a menos que esté pensando en admitir navegadores realmente antiguos, no hay una razón de peso para usar ninguno de los dos.
Editado por Jeremy Girard el 2/7/17
