Glosario y referencias

Cómo usar esta nota

El glosario es de búsqueda rápida: cuando un término en una nota te resulte confuso, vuelve aquí. La bibliografía es para profundizar: si un tema te interesa más, aquí tienes por dónde seguir.

Glosario

A

• @apply: removed. Era una directiva para aplicar reglas de un custom property.
• @charset: directiva para declarar el encoding del archivo.
• @container: at-rule para container queries.
• @counter-style: at-rule para definir estilos de contador.
• @font-face: at-rule para definir fuentes personalizadas.
• @import: at-rule para importar otras hojas de estilos.
• @keyframes: at-rule para definir keyframes de animación.
• @layer: at-rule para organizar la cascade en capas.
• @media: at-rule para media queries.
• @namespace: at-rule para namespaces XML.
• @page: at-rule para CSS de impresión.
• @property: at-rule para declarar custom properties tipadas.
• @supports: at-rule para feature detection.
• Absolute length: unidad absoluta (px, cm, mm, in, pt, pc).
• Alpha: canal de transparencia.
• Animation: propiedad CSS para reproducir keyframes.
• Aspect ratio: proporción width
  , configurable con aspect-ratio.

B

• Background: propiedad CSS para el fondo de un elemento.
• Block: tipo de display que ocupa todo el ancho.
• Border: propiedad CSS para el borde.
• Border-radius: propiedad CSS para esquinas redondeadas.
• Box model: el modelo de caja: margin, border, padding, content.
• Box-sizing: controla cómo se calcula el width (content-box vs border-box).
• Box-shadow: propiedad CSS para sombras de caja.

C

• Cascade: el algoritmo de CSS que decide qué regla gana.
• calc(): función CSS para cálculos.
• ch: unidad relativa al ancho del carácter “0”.
• class: selector CSS para clases.
• class selector: .classname.
• clip-path: propiedad CSS para recortar elementos.
• cm: centímetro, unidad absoluta.
• color: propiedad CSS para el color del texto.
• color-mix(): función CSS para mezclar colores.
• column-count: propiedad CSS para número de columnas.
• content: propiedad CSS para contenido generado.
• counter(): función CSS para mostrar contadores.
• counter-increment: propiedad CSS para incrementar contadores.
• counter-reset: propiedad CSS para resetear contadores.
• cubic-bezier(): función CSS para timing function custom.

D

• Declaration: par propiedad-valor en CSS.
• descendant selector: E F.
• display: propiedad CSS que define cómo se ve el elemento.
• div: elemento HTML genérico de bloque.

E

• em: unidad relativa al font-size del padre.
• em (HTML): elemento de énfasis.
• ex: unidad relativa a la x-height.

F

• Filter: propiedad CSS para filtros visuales.
• flex: shorthand de flex-grow, flex-shrink, flex-basis.
• flex-basis: tamaño base de un flex item.
• flex-direction: dirección del eje principal.
• flex-flow: shorthand de flex-direction y flex-wrap.
• flex-grow: factor de crecimiento de un flex item.
• flex-shrink: factor de encogimiento de un flex item.
• flex-wrap: si los items saltan a la siguiente línea.
• float: propiedad CSS para sacar del flujo.
• font-family: propiedad CSS para la fuente.
• font-feature-settings: propiedad CSS para OpenType features.
• font-size: propiedad CSS para el tamaño de la fuente.
• font-stretch: propiedad CSS para el ancho de la fuente.
• font-style: propiedad CSS para el estilo (italic, oblique).
• font-variant: propiedad CSS para small-caps, ligaduras, etc.
• font-weight: propiedad CSS para el grosor.

G

• Gap: propiedad CSS para espacio entre items en flex/grid.
• Gradient: degradado de color.
• Grid: layout bidimensional.
• grid-area: nombre del área en grid.
• grid-column: posición de columna en grid.
• grid-row: posición de fila en grid.
• grid-template-areas: definición de áreas con nombres.
• grid-template-columns: definición de columnas.
• grid-template-rows: definición de filas.

H

• height: propiedad CSS para la altura.
• Hex: notación hexadecimal de colores.
• HSL: Hue, Saturation, Lightness.
• HWB: Hue, Whiteness, Blackness.
• hyphens: propiedad CSS para partición de palabras.

I

• !important: marca una declaración como la más prioritaria.
• inline: tipo de display que solo ocupa el ancho del contenido.
• inline-block: híbrido inline/block.
• isolation: propiedad CSS para crear un nuevo contexto de composición.

J

• justify-content: alineación en el eje principal.

K

• kerning: ajuste entre pares de letras.

L

• Layer: capa de la cascade.
• letter-spacing: propiedad CSS para espacio entre letras.
• line-height: propiedad CSS para la altura de línea.
• linear-gradient(): función CSS para gradient lineal.
• list-style: propiedad CSS para el marker de listas.

M

• Margin: propiedad CSS para el espacio exterior.
• Margin collapse: los margins verticales adyacentes se “combinan”.
• Mask: propiedad CSS para enmascarar un elemento.
• max-height: propiedad CSS para altura máxima.
• max-width: propiedad CSS para ancho máximo.
• Media query: regla condicional según el contexto.
• min-height: propiedad CSS para altura mínima.
• min-width: propiedad CSS para ancho mínimo.
• mix-blend-mode: cómo se mezcla con el backdrop.

N

• navy: color con nombre en CSS.
• nesting: anidación de selectores.

O

• Opacity: propiedad CSS para la transparencia.
• Outline: propiedad CSS para el outline.
• Overflow: propiedad CSS para el desbordamiento.

P

• Padding: propiedad CSS para el espacio interior.
• Parent: el elemento padre.
• perspective: propiedad CSS para la perspectiva 3D.
• position: propiedad CSS para el tipo de posicionamiento.
• pseudo-class: selector de estado (
  ,
  , etc.).
• pseudo-element: pseudo-elemento (::before, ::after).

Q

• quotes: propiedad CSS para definir comillas.

R

• radial-gradient(): función CSS para gradient radial.
• rem: unidad relativa al font-size del root.
• RGB: Red, Green, Blue.
• RGBA: RGB con alpha.
• round: función de redondeo.

S

• saturation: saturación de un color.
• Selector: patrón que selecciona elementos.
• Specificity: peso de un selector.
• steps(): timing function discreta.
• Style: estilo.
• SVG: Scalable Vector Graphics.

T

• Table: tabla.
• text-align: propiedad CSS para alineación horizontal.
• text-decoration: propiedad CSS para subrayados, etc.
• text-shadow: propiedad CSS para sombras de texto.
• text-transform: propiedad CSS para mayúsculas, minúsculas, etc.
• text-wrap: propiedad CSS para cómo se ajusta el texto.
• theme: tema visual.
• transform: propiedad CSS para transformar el elemento.
• transition: propiedad CSS para animar transiciones.
• translate(): función CSS para mover.

U

• URL: Localizador Uniforme de Recursos.
• unit: unidad.

V

• Variable font: fuente con variations.
• vh, vw, vmin, vmax: unidades viewport.
• visibility: propiedad CSS para visibilidad.

W

• white-space: propiedad CSS para el manejo de espacios.
• width: propiedad CSS para el ancho.
• will-change: propiedad CSS para hint de optimización.
• word-break: propiedad CSS para romper palabras.
• word-spacing: propiedad CSS para espacio entre palabras.
• word-wrap: propiedad CSS para wrapping.

X

• X-Height: altura de la letra “x”.

Y

• Y-Coordinate: coordenada Y.

Z

• z-index: propiedad CSS para el orden de apilamiento.

Bibliografía esencial

Clásicos de CSS

• CSS: The Definitive Guide (Eric A. Meyer & Estelle Weyl, 2023, 5ª ed.). El libro de referencia por excelencia. Esta wiki es la destilación de este libro.
• CSS Secrets (Lea Verou, 2015). Soluciones elegantes a problemas comunes de CSS.
• CSS Mastery (Andy Budd, Simon Collison, Cameron Moll). Otro clásico sobre técnicas de CSS.

Modern CSS

• CSS: The Definitive Guide - Web Layout and Presentation (5ª ed., 2023). Cubre el estado del arte de CSS.
• CSS in Depth (Keith J. Grant, 2018). Para desarrolladores que ya saben lo básico.
• Modern CSS (Craig Buckler, 2021). Pragmático.

Grid y Flexbox

• CSS Grid Layout (Eric A. Meyer, 2022). La guía específica de Grid.
• Flexbox in CSS (Eric A. Meyer, 2015). Sobre Flexbox.
• Grid Layout in CSS (Eric A. Meyer, 2016). Otra perspectiva.

Responsive design

• Responsive Web Design (Ethan Marcotte, 2011). El libro fundador del concepto.
• Responsive Design Patterns (Ethan Marcotte). Patrones para sitios responsive.
• Mobile First (Luke Wroblewski, 2011). Por qué empezar por mobile.

CSS avanzado

• CSS: The Definitive Guide - Web Layout and Presentation (5ª ed.). Cubre aspectos avanzados.
• The CSS Workshop (Lewis Coulson). Un workshop práctico.
• CSS: The Good Parts (Pete Brown). Lo mejor de CSS, sin el resto.

TypeScript y CSS

• CSS Variables (CSS Houdini). Para ir más allá de las custom properties.
• CSS Houdini (CSS Working Group). La API de extensibilidad de CSS.

Historia de CSS

• CSS: The Definitive Guide (primeras ediciones). La historia de cómo CSS evolucionó.
• Cascading Style Sheets (Håkon Wium Lie & Bert Bos, 2005). Por los creadores.

Sitios web clave

Documentación

• MDN Web Docs: https://developer.mozilla.org/css/. LA referencia. Todo desarrollador debe consultar MDN regularmente.
• W3C CSS: https://www.w3.org/Style/CSS/. La spec oficial.
• CSS Working Group: https://www.w3.org/Style/CSS/WG/. Quién decide el futuro de CSS.

Can I use

• Can I use: https://caniuse.com/. Compatibilidad de features CSS en navegadores.

Aprende

• CSS Tricks: https://css-tricks.com/. Artículos, guías, snippets.
• Smashing Magazine: https://www.smashingmagazine.com/category/css/. Artículos de calidad.
• A List Apart: https://alistapart.com/. Sobre web design.
• CSS Wizardry: https://csswizardry.com/. Sobre arquitectura CSS.

Herramientas

• CSS Gradient: https://cssgradient.io/. Generador de gradients.
• CSS Grid Generator: https://cssgrid-generator.netlify.app/. Generador de grids.
• CSS Easing Functions: https://easings.net/. Para animaciones.
• Cubic Bezier: https://cubic-bezier.com/. Generador de timing functions.
• Flexbox Playground: https://flexbox.tech/. Generador de flex layouts.
• CSS Layout Generator: https://layout.bradwoods.io/. Generador de layouts.

Comunidades

• r/css: https://www.reddit.com/r/css/.
• CSS Discord: varios discords de frontend.
• CSS Working Group: https://github.com/w3c/csswg. El GitHub donde se discute el futuro de CSS.

Newsletters

• CSS Weekly: https://css-weekly.com/. Las novedades de CSS.
• Frontend Focus: https://frontendfoc.us/. News general de frontend.
• Smashing Newsletter: https://www.smashingmagazine.com/newsletter/.

Conferencias

• CSS Day: conferencias dedicadas a CSS.
• Smashing Conf: conferences sobre web design.
• An Event Apart: eventos sobre web design.

Conceptos para profundizar

Para profundizar en layout

• Flexbox: El modelo unidimensional. Practica con ejemplos.
• Grid: El modelo bidimensional. Practica con ejemplos.
• Container queries: Lo más nuevo. Practica con componentes.

Para profundizar en tipografía

• Font features: OpenType features (kerning, ligatures, etc.).
• Variable fonts: Cómo aprovechar las variaciones.
• Web fonts: Carga, performance, optimización.

Para profundizar en efectos

• Filters: blur, contrast, saturate, drop-shadow.
• Blend modes: multiply, screen, overlay.
• Clip-path y mask: Recortes avanzados.

Para profundizar en responsive

• Mobile-first: Empezar por mobile.
• Container queries: Para componentes.
• Fluid typography: clamp, vw, minmax.

Para profundizar en arquitectura

• BEM: Block Element Modifier.
• ITCSS: Inverted Triangle CSS.
• CUBE CSS: Una variante moderna.
• @layer: Cascade layers.

Para profundizar en animación

• Transitions: entre estados.
• Animations: keyframes.
• Transform: 2D y 3D.
• prefers-reduced-motion: accesibilidad.

Próximos pasos

• Epílogo y claves: cierre de la wiki. Las ideas recurrentes y cómo seguir aplicando CSS profesional.