A lo largo del tiempo que lleva el blog activo, he recopilado artículos para nivel básico, medio, y ahora toca escribir uno para el nivel avanzado. Aquí traigo una lista de consejos sobre CSS vista en GitHub para gente experta en el tema, junto con una demostración:
Usar CSS Reset
CSS resets te ayuda a mostrar consistencia de estilos en distintos navegadores de forma limpia. Puedes usar una librería CSS reset como Normalize o trabajar con este trozo de código:
* { box-sizing: border-box; margin: 0; padding: 0; }
Demo
Nota: Si sigues el tip de abajo quizás no desees meter la propiedad “box-sizing” en tu CSS Reset.
Inherit box-sizing
Vamos a hacer que box-sizing esté heredado de html:
html { box-sizing: border-box; }*, *::before, *::after { box-sizing: inherit; }
Esto hace más facil la tarea de cambiar box-sizing en plugins u otros componentes.
Usar :not() para aplicar/no aplicar bordes en navegación
En vez de poner el borde
.nav li { border-right: 1px solid #666; }
..y luego eliminarlo del último elemento:
/* remove border */ .nav li:last-child { border-right: none; }
…usa la pseudo-clase :not() para aplicarlo sólo a los elementos que desees:
.nav li:not(:last-child) { border-right: 1px solid #666; }
Está claro que puedes usar.nav li + li o .nav li:first-child ~ li, pero con esta propiedad se definen los bordes de forma más humana
Demo
Añadir line-height al cuerpo
No necesitas añadir line-height a cada
,
body { line-height: 1.5; }
De esta manera los elementos heredarán el line-height del body.
Demo
Vertical-center a cualquier cosa
Realmente puedes hacerlo:
html, body { height: 100%; margin: 0; body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
También puedes hacerlo horizontalmente, etc, revista este artículo para más info.
Nota: Existen posibles fallos en IE11.
Demo
Listas separadas por comas
ul > li:not(:last-child)::after { content: ","; }
Usa la pseudo clase :not() así las comas no se añadirán al ultimo item. the :not() pseudo-class so no comma is added to the last item.
Nota: Puede que falle en cuanto a accesibilidad, especialmente en dispositivos de lectura.
Selectionar items usando nth-child negativo
Usa nth-child negativo en CSS para seleccionar items a través de n.
li { display: none; /* select items 1 through 3 and display them */ li:nth-child(-n+3) { display: block; }
O, aplicando :not(), prueba:
/* select items 1 through 3 and display them */ li:not(:nth-child(-n+3)) { display: none; }
Demo
Usar SVG para iconos
No hay razón para no usar SVG para iconos:
.logo { background: url("logo.svg"); }
SVG escala bien en todas las resoluciones y está soportado en todos los navegadores más adelantados que IE9.
Nota: Si tienes iconos en SVG y fallan al cargar, esto ayudará a la accesibilidad:
.no-svg .icon-only:after { content: attr(aria-label); }
Usar el lobotomizado owl selector
Usar el selector universal (*) con el selector sibling (+) te proporcionará grandes posibilidades
* + * { margin-top: 1.5em; }
En este ejemplo todos los elementos en el flujo del documento que siguen otros elementos recibirán margin-top: 1.5em. Para más información echa un vistazo aquí.
Demo
Usar max-height para CSS Sliders puros
.slider { max-height: 200px; overflow-y: hidden; width: 300px; .slider:hover { max-height: 600px; overflow-y: scroll; }
El elemento se expande a la altura máxima on hover y el slider se muestra como resultado del overflow.
Igualar la anchura de celdas en tablas
Usando table-layout: fixed consigues una anchura igual en todas las tablas:
.calendar { table-layout: fixed; }
Demo
Olvidate de los margin hacks con Flexbox
Cuando se trabajan con gutters en columnas puedes usar la propiedad flexbox space-between para desacerte de nth-, first-, y last-child.
.list { display: flex; justify-content: space-between; .list .person { flex-basis: 23%; }
Ahora los gutters de las columnas aparecen separados siempre.
Usar selectores atributos con enlaces vacíos
Se muestra cuando el elemento no tiene valor de texto pero href tiene un enlace:
a[href^="http"]:empty::before { content: attr(href); }
Demo
Estilizar enlaces por defecto
a[href]:not([class]) { color: #008000; text-decoration: underline; }
Los enlaces que no tengan el atributo class se distinguirán de sin afectar a la cascada.
Ritmo vertical consistente
Usando el selector universal (*) entre un elemento:
.intro > * { margin-bottom: 1.25rem; }
Esto hará que el contenido sea mucho más fácil de leer.
Ratio boxes intrínsecas
Para crear una caja con un ratio intrínseco, sólo tienes que aplicar padding top o bottom a un div:
.container { height: 0; padding-bottom: 20%; position: relative; .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
Usando el 20% para padding hace que la altura de la caja sea equivalente al 20% de su anchura, da igual la anchura de la ventana.
Demo
Estilizar imágenes rotas
Haz que las imágenes rotas sean más estéticas con un poco de CSS:
img { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; }
Ahora añade pseudo elementos para mostrar un mensaje al usuario y una url en la imagen rota:
img:before { content: "Lo siento, la imagen no funciona"; display: block; margin-bottom: 10px; img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; }
Puedes leer más en Ire Aderinokun.
Usar rem para tamaño global y em para tamaño local:
Después de escribir la fuente base en el root (html { font-size: 100%; }), especifica el tamaño de la fuenta para elementos textuales a em:
h2 { font-size: 2em; p { font-size: 1em; }
Después especifica el tamaño de la fuente para módulos a rem:
article { font-size: 1.25rem; aside .module { font-size: .9rem; }
Ahora cada módulo es más fácil de estilizar y más flexible.
Esconder vídeos de autoplay que no están muteados
Si el sonido está muteado no mostrar el vídeo (gracias a la pseudo clase :not() nuevamente):
video[autoplay]:not([muted]) { display: none; }
Usar :root para tipografía flexible
Ideal para adaptar la tipografía en todos los tamaños de ventana:
:root { font-size: calc(1vw + 1vh + .5vmin); }
Puedes usar la unidad em en root: al valor calculado por :root.
body { font: 1rem/1.6 sans-serif; }
Demo
Especificar la font-size en elementos del form para una mejor experiencia móvil
De esta forma los navegadores móviles no harán zoom en los elementos del form HTML cuando se presione el dropdown
input[type="text"], input[type="number"], select, textarea { font-size: 16px; }