Soporte del navegador Una de las características principales de la herramienta CSS es que está calificada para brindar soporte perfecto para navegadores de Clase A. La compatibilidad con la calificación del navegador es puramente una calificación de Yahoo!, y puede ver la descripción completa en su sitio web, que básicamente describe cómo se comporta bien CSS en los navegadores del mercado actual. En esta tabla en línea, los navegadores se dividen en tres niveles de compatibilidad con navegadores (A, C y X). El nivel A es el nivel más alto de soporte. Al aprovechar el poder de los estándares web modernos, la biblioteca YUI descubre que una experiencia Clase A ofrece funcionalidad avanzada y fidelidad visual. Las categorías de soporte y los archivos relacionados le dan una idea de dónde se admite CSS, pero debería estar disponible en todos los navegadores (con posibles degradaciones). CSS reutilizable La biblioteca YUI incluye tres áreas o características de CSS, que cubren el formato, la introducción de fuentes y el diseño basado en cuadrículas (columnas y filas). Estos términos se utilizan en el sitio web para describir estos tres elementos: Cuadrículas de páginas: le permite incrustar cuadrículas de una a cuatro columnas dentro de la capacidad de la plantilla que esté utilizando. Cuadrículas de página: buildgridsgrids.css Diseño de página de cuadrícula El diseño basado en cuadrículas es la fuerza impulsora detrás de casi cualquier diseño de sitio o diseño de página. En el pasado, esto se hacía a menudo a través de tablas HTML, pero CSS proporciona un tremendo poder y flexibilidad para el diseño de páginas. Page Grid proporciona código para crear páginas con columnas y filas según sus requisitos. En el nivel más básico de la cuadrícula de la página, proporciona siete plantillas de página web, seis de las cuales definen diseños detallados de contenido principal/barra de herramientas, la séptima plantilla define un diseño sin barras de herramientas y el contenido principal ocupa todo el ancho de la página. Los nombres de estas plantillas son los siguientes: yui-t1: Contiene una barra de herramientas con un ancho de 160 px a la izquierda y un área principal con un ancho de 570 px. Lista A <html><cabeza> El diseño se proporciona para toda la página: a la etiqueta div principal se le asigna la clase yui-t2. Esto muestra que se utiliza la segunda plantilla.
Fuentes: proporciona estandarización y control de tipografía en todos los navegadores. En general, proporciona fuentes y alturas de línea consistentes y, al mismo tiempo, admite ajustes de fuentes por parte del usuario (dentro del navegador).
Restablecer: proporciona estandarización entre navegadores de asignaciones predeterminadas a elementos HTML. También elimina expresiones predeterminadas comunes en los navegadores, como el uso de negrita para elementos resaltados, para ayudar a garantizar que todas las definiciones de fuentes sean intencionales y que los elementos siempre se utilicen por su significado semántico, no por la expresión visual habitual.
Después de ser instalado, cada elemento de la descarga de la biblioteca YUI está disponible en los siguientes directorios/archivos en el servidor web:
Fuentes: buildfontsfonts.css
Restablecer: compilar eset eset.css
Puede instalar estos directorios base en su propio servidor web o colocarlos dentro de su sitio para poder consultarlos según sea necesario. Una característica importante de CSS (además de ser gratuito) es que se prueba y depura minuciosamente antes de su lanzamiento. Echemos un vistazo más de cerca a las herramientas CSS en acción.
yui-t2: Contiene una barra de herramientas con un ancho de 180px a la izquierda y un área principal con un ancho de 550px.
yui-t3: contiene una barra de herramientas con un ancho de 300 px a la izquierda y un área principal con un ancho de 430 px.
yui-t4: Contiene una barra de herramientas con un ancho de 180 px a la derecha y un área principal con un ancho de 550 px.
yui-t5: contiene una barra de herramientas con un ancho de 240 px a la derecha y un área principal con un ancho de 490 px.
yui-t6: contiene una barra de herramientas con un ancho de 300 px a la derecha y un área principal con un ancho de 430 px.
yui-t7: contiene un área principal con un ancho de 750 px y sin barras de herramientas.
Puedes combinar (o editar, si eres lo suficientemente valiente) estas plantillas para adaptarlas a tus propósitos. El Listado A utiliza el primer diseño para diseñar una página (nota: la herramienta CSS está instalada en el directorio predeterminado del servidor web).
<title>Ejemplo 1 de herramientas CSS de Yahoo</title>
<enlace rel="hoja de estilo" tipo="texto/css" href="build/grids/grids.css">
</cabeza>
<cuerpo>
<div id="doc" clase="yui-t2">
<div id="hd">Encabezado de página</div>
<div id="bd">
<div id="yui-principal">
<div class="yui-b">Área principal</div>
</div><div class="yui-b">Columna izquierda</div>
</div>
<div id="ft">Pie de página</div>
</div></body></html>
Algunas notas sobre la página HTML:
La página se divide en áreas de encabezado, cuerpo y pie de página. El encabezado recibe el identificador hd, el cuerpo es bd y el pie de página es ft.
El cuerpo principal de la página se divide en el área izquierda (si la plantilla lo admite) y el área principal. A ambos se les asigna la clase yui-b, pero al área principal se le agrega el atributo de identificador yui-main en su etiqueta div.