CSS Recursos i Novetats
Resources
- Defensive programming:
Soluciones a cosas raras que suelen pasar con los estilos.
- CSS Tricks:
Artículos buenos sobre como usar CSS para conseguir según que resultados.
- MDN CSS
Documentación de Mozilla sobre CSS (tutoriales, referencia...)
- W3Schools CSS:
Documentación de W3Schools sobre CSS
- Can I Use:
Buscador mantenido por la comunidad para saber qué navegadores soportan una funcionalidad.
- Layout Generator
Generador de layouts CSS
Novetats 2024
orphans: n // Number of lonely lines at the end of a page/column/region (fragmentation break)
widows: n // Number of lonely lines at the begining of a page/column/region (fragmentation break)
text-wrap: balance // balances words in each line, for example for titles
color-mix(in <model> longer/shorter param, <color1> [percent], <color2> [percent])
lch/oklch // new color model
rgb(from var(--color) calc((r + g) / 2) calc((r + g) /2) b / .4) // modifies components of a given color
// make rules not to depend that more on specificity or order
@layer reset, elements, layout, components // from general to specific
@layer my-layer {
rules...
}
// subgrids (until now only in firefox, since sep 2024 also in safary and chrome)
// view transitions:
:user-invalid // much like :invalid but wait for the user to interact
Novetats 2023
aspect-ratio: 16 / 9;
size: 50vw // sets both height and width
list-style-type:
inset: 3rem; // sets up, right, left, and bottom
isolation: isolate; // creates a new context for z-index (like svg layers)
import styles from './file.css';
div:focus-within // selector any subelement has focus
filters:
blur(size) // gaussian blur
brightness(factor) // color value multiplier
grayscale(factor) // 0 unmodified 100% grayscale
contrast(factor%) // enhances contrast, 0% grey, 100% normal, more adds contrast
invert(factor) // negative colors linear beteen 0 and 100%
drop-shadow(x-offset y-offset span color) // unlike box-shadox follows the profile of the content, not the box, no inset nor spread applied
hue-rotate(angle) // applies a color wheel rotation
opacity(factor) // 0 full alpha 100% full opacity
saturate(factor) // 0 unsaturated, 100 normal, beyond saturated
sepia(factor)
contain: layout/style/paint // TODO: limit
Novetats 2022
new functions
calc(expression)
min(value, value, value...)
max(value, value, value...)
clamp(min, value, max)
attr(name units, fallback)
takes the value from named xml attribute of the target (no comma between attribute name and the units
url(url)
rgb(r,g,b)
rgba(r,g,b,a)
hsl(hue, saturation, lightness)
- hue 0/360 red, 120 green, 240 blue.
- saturation 100% is the full color, 0% a shade of gray
- lightness: 100% white, 50% normal, 0% black
hsla(hue, saturation, lightness, alpha)
new colors
- currentColor: Inherited color, useful to expand to pseudo selectors or modify it
- transparent: rgba(0,0,0,0)