La
especificación de CSS 3 es cada vez más soportada por los navegadores actuales, como siempre, Internet Explorer es
el peor el que más tiempo tarda en adoptar los cambios, pero con el anuncio de un mayor
soporte de CSS 3 en IE9 y con posibles
novedades sobre su salida en Marzo, tenemos un rompecabezas casi completo.
Algo muy interesante de
CSS 3, son sus selectores, que como su nombre indica,
permite seleccionar un elemento web para darle estilo o estructura. ¿Cuales son?
Selectores CSS 3
Notación:
- Ele – Elemento – Cualquier elemento web. Ejemplos: div, span, a, li, p, strong, etc.
- atr – Atributo – Describe las características de un elemento web. Ejemplos: href, alt, class, rel, etc.
- val – Valor – Magnitud de un atributo. Ejemplo: en rel=’nofollow’; rel es el atributo y nofollow el valor.
- n – Cualquier número entero.
Selectores y ejemplos prácticos:
Sintaxis | Descripción |
Ele [atr^='val'] | Selecciona todos los elementos que inicien con un valor especificado.
Ejemplo: a[href='http://blogandweb.com'] Seleccionará todos los links hacia blogandweb.com |
Ele[atr$='val'] | Selecciona todos los elementos que terminen con un valor especificado.
Ejemplo: a[href$='.zip'] Seleccionará todos los links de archivos zip. |
Ele[atr*='val'] | Selecciona todos los elemento que contenga, indiferente a su ubicación, un valor especificado.
Ejemplo: a[href*='tag'] Seleccionará todos los links que contengan la palabra "tag". |
Ele:nth-child(n) | Selecciona el enésimo hijo de su elemento padre. Ejemplo: p a:nth-child(2) seleccionará el segundo enlace de un párrafo. |
Ele:nth-last-child(n) | Selecciona el enésimo hijo de su elemento padre empezando a constar del último al primero.
Ejemplo: p a:nth-last-child(2) seleccionará el penúltimo enlace de un párrafo. |
Ele:nth-of-type(n) | Selecciona el enésimo elemento de su tipo.
Ejemplo: p img:nth-of-type(1) seleccionará la primer imagen en un párrafo. |
Ele:nth-last-of-type(n) | Selecciona el enésimo elemento de su tipo, empezando a constar del último al primero.
Ejemplo: p img:nth-last-of-type(1) seleccionará la última imagen en un párrafo. |
Ele:last-child | Selecciona el último hijo de un elemento.
Ejemplo: .post p:last-child seleccionará el último párrafo dentro de un elemento con clase "post". |
Ele:first-of-type | Selecciona el primer elemento de su tipo en el elemento padre.
Ejemplo: .post img:first-of-type seleccionará la primer imagen dentro en un elemento con clase "post". |
Ele:last-of-type | Selecciona el último elemento de su tipo en el elemento padre.
Ejemplo: .post img:last-of-type seleccionará la última imagen dentro en un elemento con clase "post". |
Ele:only-child | Selecciona el único elemento hijo de un elemento padre.
Ejemplo: ul li:only-child seleccionará el elemento una de lista, cuando la lista solo contenga un elemento. |
Ele:only-of-type | Selecciona el único elemento de cierto tipo.
Ejemplo: .post img:only-of-type seleccionará las imágenes presentes en los elementos .post con solo una imagen. |
Ele:empty | Selecciona los elementos web que no tienen elementos hijos.
Ejemplo: ul:empty seleccionará todas las listas no numeradas sin elementos. |
Ele:target | Selecciona los elementos que tienen como destino una URL . |
Ele:enabled | Selecciona elementos (de formularios) con valor enabled (habilitado).
Ejemplo: input[type="text"]:enabled seleccionará los campos de tipo texto que están habilitados. |
Ele:disabled | Selecciona elementos (de formularios) con valor disabled (deshabilitado).
Ejemplo: input[type="text"]:disabled seleccionará los campos de tipo texto que están deshabilitados. |
Ele:checked | Selecciona elementos (de formularios) con valor checked (seleccionado).
Ejemplo: input:checked seleccionará los campos que estén seleccionados. |
Ele::selection | Selecciona los elementos que han sido seleccionados/resaltados por el usuario. Las propiedades aplicables son color, background, cursor y outline.
Ejemplo: ::selection ubicara el texto que haya sido seleccionado/resaltado (con el cursor del mouse) por el autor. |
Ele:not(s) | Selecciona todo los elementos que no sean un selector indicado (s) dentro de un elemento web.
Ejemplo: .post:not(img) seleccionará todos los elementos que no sean imágenes y estén dentro del elemento web con clase "post". |
::first-line | Selecciona la primera línea de un elemento web.
Ejemplo: p::first-line seleccionará la primera línea de un párrafo. |
::first-letter | Selecciona la primera letra de un elemento web.
Ejemplo: p::first-letter seleccionará la primera letra de un párrafo. |
::before | Se ubica en la parte anterior de un elemento web (típicamente para agregar contenido).
Ejemplo: p::before {content: 'Nota: '} Agregará el texto "Nota :" antes de cada párrafo. |
::after | Se ubica en la parte posterior de un elemento web (típicamente para agregar contenido).
Ejemplo: cite::before {content: 'Fin de la cita'} Agregará el texto "Fin de la cita" al final de cada elemento cite . |
Navegadores que soportan selectores CSS 3
A
grandes rasgos, sin entrar a ver
cada caso, los selectores CSS 3 están soportados en:
- Google Chrome 1.0 o superior.
- Mozilla Firefox 3.0 o superior.
- Opera 9.5 o superior.
- Safari 3.1 o superior.
- ¿Internet explorer 9?
Como puede verse, Internet Explorer es prácticamente el único obstáculo para un soporte casi completo. Sin embargo, puede hacerse algo al respecto, por medio de
ie-css3.js puede agregarse soporte a varios selectores desde IE5 hasta IE8.
Conclusión
Los selectores de CSS 3 se presentan como una interesante herramienta: ahorran en parte el uso de lenguajes de programación, pueden hacer más optimo el
código CSS y más especifica la selección de elementos.
En lo particular, no veo mucho problema en su uso para fines estéticos para un sitio web; aquel navegador que no lo soporte, tendrá una versión a su medida, sin las ventajas de CSS 3. No así en el uso en la funcionalidad del sitio (navegación, formularios, etc) donde si tendrá un impacto en la experiencia del usuario.
En fin, aun nos falta la salida de IE9 y/o que una buena parte de los usuarios de la web adopten navegadores modernos. Por suerte, las estadísticas dicen que se va por buen camino.
Más información
No hay comentarios:
Publicar un comentario