¿Se pregunta cuál es la diferencia entre «@IMPORT» y «LINK» en CSS?

¿Se pregunta cuál es la diferencia entre “@IMPORT” y “LINK” en CSS?

¿Se pregunta cuál es la diferencia entre «@IMPORT» y «LINK» en CSS?

VALORACIÓN DEL ARTÍCULO:
5/5


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

TAMBIÉN TE INTERESA

riesgos DeepSeek

Reportan los primeros riesgos de seguridad en DeepSeek

Pocos días después de la irrupción de DeepSeek en el mundo, ya empiezan a aflorar algunos problemas relacionados con la seguridad en DeepSeek y la privacidad de los datos que emplean los usuarios. Son millones y millones personas las que ya están probando las mieles de la IA china. El modelo R1 de DeepSeek ha

dispositivos Alexa

Cómo controlar la privacidad de tus conversaciones con los dispositivos Alexa

Los dispositivos Alexa se han convertido en un miembro más de muchas familias. Ciertamente útiles para recordatorios de la lista de la compra, alarmas, recetas o para disfrutar de un rato de música, estos famosos asistentes virtuales en forma de altavoces son indispensables para muchos y han dado un plus de inteligencia para los hogares.

DeepSeek

Y de repente… DeepSeek: la IA china que planta a cara la tecnología americana

DeepSeek es un ejemplo de lo que está ocurriendo con los grandes avances de la economía moderna. Cada vez que Estados Unidos implanta una solución triunfal, China hace lo propio seguidamente con una mayor eficiencia y a un coste menor. Tradicionalmente, el gigante asiático ha sido un gran replicador en todos los órdenes, pero ahora,

serie Samsung Galaxy S25

Nuevos Samsung Galaxy S25: la IA ya no es una parte sino un todo

Samsung ha presentado oficialmente los nuevos Galaxy S25 Ultra, Galaxy S25+ y Galaxy S25. Había mucha expectación para ver el que es el segundo gran teléfono de 2025 tras el OnePlus 13. Hay diferencias entre ambos, pero lo nuevo de los coreanos pueden marcar un punto de inflexión a nivel de operatividad, ya que la

IA emocional

La IA emocional está más cerca de lo que parece…

¿Es una utopía hablar de IA emocional? ¿Las máquinas pueden tener sentimientos? ¿Hasta qué punto se pude hablar en clave de humanización cuando mezclamos la tecnología? La respuesta está en la neurociencia, aunque el cine ya nos ha dado algunas pistas de cómo podrían sentir los robots. Clásicos como Terminator 2 o Cortocircuito nos mostraron

servidor proxy o VPN

¿Servidor proxy o VPN? Elige lo que más te convenga

La ciberdelincuencia está por todos los lados y puede que en algún momento nos toque a nosotros como usuarios. Así que además de antivirus y sistemas de defensa, puede ser el momento de pensar en la posibilidad de tener un servidor proxy o un VPN. Estas herramientas nos aportarán un extra de privacidad y seguridad