Inicia sesión


Como utilizar la regla @import

Como utilizar la regla @importLa regla @import permite cargar uno o varios archivos CSS dentro de otro. Puede ser muy útil en determinados casos. Por ejemplo, cuándo trabajas en una web grande y compleja, el archivo CSS se vuelve descomunal e intratable y para hacernos la vida más fácil podemos separar el código en varios archivos, cada uno dedicado a una parte específica, y cargarlos con la regla @import. En tu HTML puedes cargar un sólo archivo:
<link rel="stylesheet" type="text/css" href="/css/style.css">
Y en el archivo style.css cargar todos los demás que necesites y en el orden que necesites:
@import url('/css/reset.css');
@import url('/css/layout.css');
@import url('/css/typograhpy.css');
@import url('/css/content.css');
@import url('/css/sidebar.css');
@import url('/css/color.css');
La ventaja es obvia, puedes dividir el CSS en diferentes partes siguiendo la lógica que prefieras para tener el trabajo más organizado, más fácil de manejar y más fácil de aislar errores.

Además, la regla @import permite utilizar toda la potencia de los media-query y cargar diferentes archivos en función del dispositivo o sus características:
@import url('/css/reset.css') all;
@import url('/css/layout.css') all;
@import url('/css/typograhpy.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/color.css') screen;
@import url('/css/print.css') print;
@import url('landscape.css') screen and (orientation:landscape);

El gran inconveniente


Como otras muchas cosas cool de CSS, hay que utilizarlas con precaución y sabiendo muy bien lo que se hace. La regla @import tiene algunas particularidades que te pueden llevar de cabeza pero sin duda su principal inconveniente es que cada archivo cargado con @import supone una nueva solicitud al servidor, lo que puede afectar a la velocidad de carga de la web. La tendencia general es disminuir al máximo el número de solicitudes por página, y por tanto la recomendación general es no utilizar la regla @import.

Este problema es fácil de arreglar. Puedes seguir utilizando @import tanto como desees y utilizar algún método para combinar todos los archivos en el servidor y mandar al navegador del usuario un código CSS sin reglas @import. Estos métodos pueden ser algo complicados pero existen soluciones open source listas para utilizar. Por ejemplo, la biblioteca minify para PHP o los plugins W3 Total Cache o WP Super Cache para WordPress.

Sólo ten en cuenta que si utilizas @import con el atributo media no te valdrá ninguna de las soluciones mencionadas; es lógico, piensa que las condiciones del atributo media se leen en el lado del cliente y no desde el servidor. Por ejemplo, no podemos diferenciar en el servidor si el documento se está imprimiendo o se está viendo en pantalla (media="print" o media="screen"), por lo que no podemos cargar diferentes archivos CSS en función de esta propiedad.


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-05
  • Categorias: Diseño Web CSS3 WebSite webmasters Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Historia de los sistemas operativos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Microsoft Windows Apple Ordenador Noticias Tutorial Informatica

Vacía tu mente, no tengas forma, ni figura

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Estilo Noticias Tutorial

Justificante de pago de Google Adsense

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Google Adsense WebSite Marketing Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial