¿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

all ia

all ia, el primer buscador de herramientas de inteligencia artificial

Ha llegado el punto en que uno ya se pierde con las herramientas de inteligencia artificial. A lo largo de este último año han surgido infinidad de soluciones que se distribuyen en todos los rincones de internet. Se podría decir que hay una para cada inquietud, sea a nivel personal en el terreno profesional. Pero

login-y-contraseña

El método definitivo para tener una contraseña segura: 9 pasos

Tener una contraseña segura es el primer paso para tener cierta seguridad en nuestra vida digital. Correo electrónico, claves del banco, Amazon, por poner unos ejemplos… son plataformas que estamos acostumbrados a usar casi a diario. Para todos ellos y el resto de plataformas a las que estemos suscritos, la contraseña segura es fundamental para

meta-quest-3

Meta Quest 3: características del nuevo adalid de la realidad virtual

La realidad virtual (VR) ha experimentado un crecimiento exponencial en los últimos años, y Meta Quest 3 se presenta como el pináculo de esta evolución. Como la tercera generación de dispositivos de realidad virtual autónomos desarrollados por Meta, anteriormente conocida como Facebook, el Meta Quest 3 representa una amalgama de tecnología de vanguardia y diseño

Wacom-Movink

Wacom Movink, el panel interactivo OLED más fino y ligero del mercado

Parecía estar ya todo escrito sobre monitores y panales y en éstas, llega el Wacom Movink para sorprendernos a todos. Dirigido especialmente para diseñadores y creadores de contenido, esta pantalla representa un avance significativo por su combinación única de rendimiento, portabilidad y calidad visual excepcional. El dispositivo llega acompañado de un nuevo lápiz digital, su