Helper - Css

Genera el codigo de inclusion de una hoja de estilos en una pagina.
Tenemos que considerar que el archivo css debe encontrarse dentro del directorio layout del sistema de la siguiente manera.
  •  layout
    •  bootstrap
      •  css
        •  style.css
        •  tables.css
        •  list.css
        •  bootstrap.css
Layout es el directorio de las plantillas o temas, bootstrap es nuestro tema elegido, css es el directorio de las hojas de estilo para dicho tema. Hemos decidido entonces que las css que se carguen con este helper sea desde este directorio (css), pues es logico que cada estilo tenga que ver con el tema elegido, si bien puede ser una restriccion se opto por dar mas coherencia al sistema.

Metodos del Helper Css:

METODOS

  • id(string): Identificador unico para el elemento HTML.
  • setCss(string): son las clases que se aplican al elemento, las mismas se separan por un espacio.

  • file(string): nombre del archivo a cargar como hoja de estilo.
  • setCompatibilidad(boolean): indica si se hara el tag retrocompatible con HTML, true si, false solo HTML5.
  • media(string): Configura el valor del atributo media, para el archivo file precedente.
  • defaultMedia(string):Establece el atributo media por defecto para los archivos file.

  • render(): genera el HTML5 con todas las propiedades establecidas.
Los metodos tachados no son aplicables a este elemento.
A tener en cuenta que si se define un defaultMedia todas las hojas de estilo que se carguen sin la propiedad media, se le cargara dicho valor, si no no llevaran el atributo media.
Para cargar otro tipo media se hace $this->helper('Css')->file('style.css')->media('print')->render();, en este caso la hoja de estilos style.css, sera cargada con el media print.

Tipos de Media validos:
allTodos los medios definidos
brailleDispositivos táctiles que emplean el sistema braille
embosedImpresoras braille
handheldDispositivos de mano: móviles, PDA, etc.
printImpresoras y navegadores en el modo "Vista Previa para Imprimir"
projectionProyectores y dispositivos para presentaciones
screenPantallas de ordenador
speechSintetizadores para navegadores de voz utilizados por personas discapacitadas
ttyDispositivos textuales limitados como teletipos y terminales de texto
tvTelevisores y dispositivos con resolución baja
La compatibilidad simplemente es si se pone o no se pone en la etiqueta HTML5 type="text/css".

OBSERVACION

Estos metodos es conveniente usarlo solo en las vistas, dado que en los adaptadores ya tenemos metodos especificos para ello.
Generaremos ahora unas etiquetas Css para nuestra pagina.
<?php
    
// Primera Forma
    
use agenor\helpers\HTML5 as HTML5;
    echo 
HTML5::Css()   ->defaultMedia('print')
                        ->
file('style')
                        ->
file('table')
                        ->
media('screen')
                        ->
file('list')
                        ->
setCompatibilidad(false)
                        ->
render();
    
// Segunda Forma
    
$this->helper('Css')-> ....... idem parametros ->render();                        
Ese codigo nos generaria la siguiente salida HTML
<link rel="stylesheet" href="http://localhost/agenor_project/layout/bootstrap/css/style.css"  media="print" >
<link rel="stylesheet" href="http://localhost/agenor_project/layout/bootstrap/css/table.css"  media="screen" >
<link rel="stylesheet" href="http://localhost/agenor_project/layout/bootstrap/css/list.css"  media="print" >  

Bueno analicemos el codigo, la primera llamada es al metodo defaultMedia('print') esto significa que para todos los archivos css, que se incluyan y que no tengan su media, se le incluira el media print, en este ejemplo sera para los archivos style.css y list.css, se puede usar tantas veces como se quiera y a partir de cada cambio, cambiara el media por defecto.
Luego vemos file(.....), este metodo carga los archivos css que seran utilizados, si el metodo que sigue al file es media(....) entonces para dicho archivo no se utilizara el media por defecto si no que se utilizara el que se menciona en el metodo media.
Para finalizar tenemos a setCompatibilidad(false) este metodo es para todos los archivos que se carguen y lo que hace es establecer la compatibilidad con HTML inferior a la version 5.-

UTILIDAD

Estos metodos resultarian utiles en sitios con muchas layouts que se cambian segun los contenidos a mostrar, de este modo nos asegurariamos que siempre cargaremos nuestros estilos correctamente.