¿Qué son los estilos CSS?
Los estilos CSS (Cascade Style Sheet), son las órdenes que se dan para dar aspecto visual a una página web. Quizás no sea muy conocido que en su día las páginas webs no eran más que simples documentos escritos en un formato concreto (HTML) que permitía establecer enlaces entre ellos.
Los estilos CSS se inventaron para dar un aspecto visual a estos documentos. Hoy en día, la especificación que está en marcha es CSS3. Es decir, la mayoría de los navegadores están preparados para interpretar los estilos que se incorporaron en esta especificación. Veremos más adelante quién decide estas normas y porqué no funcionan inmediatamente. Para entenderlo de una manera más simple, lo mejor es ver un ejemplo.
EJEMPLO: queremos mostrar un párrafo con letras rojas.
> Por un lado, necesitaremos un párrafo escrito en formato HTML:
<p class="red">TEXTO DEL PÁRRAFO</p>> Por otro lado, necesitaremos la orden escrita en CSS:
p.red { color: red; }> RESULTADO: TEXTO DEL PÁRRAFO
¿QUÉ ES UNA ESPECIFICACIÓN?
Una especificación es un conjunto de normas admitidas, que se definen en forma de estándar. Es decir, a partir del momento en que se acepta una especificación, el uso de las normas que contiene se da por admitido. Por ejemplo, en la especificación CSS3 se admitió el uso de la propiedad text-shadow, que sirve para poner una sombra a los textos.
De todas formas, la publicación de una especificación no supone que ésta esté disponible inmediatamente. Es cuestión de cada navegador que sea capaz de interpretar las nuevas propiedades y, por tanto, pueden pasar varios años hasta que todos los navegadores entiendan y muestren de forma apropiada las nuevas propiedades. En el caso de CSS3, por ejemplo, podemos ver en este enlace el porcentaje de aceptación de las normas, dependiendo de los diferentes navegadores.
¿QUIÉN ESTABLECE LAS NORMAS?
La entidad que se encarga de crear las diferentes especificaciones es el consorcio World Wide Web. Un grupo de personas expertas analiza las nuevas necesidades y establece las nuevas normas con gran lentidtud.
¿QUÉ NUEVAS PROPIEDADES ENCONTRAREMOS EN LA ESPECIFICACIÓN CSS4?
Hoy mostraremos tres propiedades nuevas, que nos parecen bastante útiles.
NOTA: Para entender la información mostrada a partir de este punto es necesario tener nociones básicas de CSS.
Pseudo-clase :blank: Nos servirá para seleccionar elementos que no contengan subelementos, textos o espacios en blanco
– En la parte HTML, por tanto, necesitaremos un elemento vacío:
<p> </p>– La parte CSS se escribiría así:
p:blank { background-color: red; }(pondrá un fondo rojo a los párrafos vacíos)
Pseudo-clase :has(): Servirá para seleccionar elementos que contengan el elemento que decidamos
– En la parte HTML, por tanto, necesitaremos un elemento que tenga algún elemento hijo. Por ejemplo, un párrafo que contenga una palabra en negrita:
<p> <strong>PALABRA</strong> </p> – Y el CSS sería así:
p:has(strong) { color: green; }(Dara color verde al texto de cualquier párrago que contenga alguna palabra en negrita)
:in-range y :out-of-range En los formularios tenemos la opción de limitar los valores que se pueden introducir en un campo concreto (por ejemplo, solo permitir edades hasta 18 años). En esos casos, el nuevo selector nos permitirá seleccionar los elementos que cumplan o no la condición
– En la parte HTML, por tanto, necesitaremos un formulario con algún campo que limite los valores permitidos:
<form><input type="number"
min="0" max="18"></form>– Y la parte de CSS se escribiría así:
input[type=number]:in-range {
border: green solid 1px;
}
input[type=number]:out-of-range {
outline: red solid 1px;
}(pondrá un borde verde a los elementos que cumplan la condición y borde rojo a los que no lo cumplan)
¿CUÁNDO SE PONDRÁ EN FUNCIONAMIENTO?
Al no estar terminada la especificación (de hecho, el primer borrador se publicó el 29 de septiembre), es muy difícil preveer cuánto tiempo pasará hasta que se pueda publicar la especificación y se puedan usar las nuevas opciones.
De todas formas, algunos navegadores interpretan correctamente ya algunas de las nuevas propiedades. En cualquiera de los casos, es recomendable no empezar a usarlas hasta que el nivel de aceptación sea bastante alto en los navegadores más usados, ya que es importante que nuestra página web se muestre correctamente en los diferentes navegadores.
ENLACES INTERESANTES:
Os proponemos varios enlaces interesantes relacionados con el tema tratado hoy:
- BROWSER SELECTOR TEST: Nos mostrará qué propiedades admite el navegador que usemos para visitar la página, divididos dependiendo de las especificaciones CSS1, CSS2, CSS3 y CSS4.
- ESPECIFICACIÓN CSS4: El borrador de la especificación CSS4 en la que está trabajando actualmente el consorcio World Wide Web.