Rubén Bernárdez
@rubenbpv
CSS1, CSS2, CSS2.1
especificaciones completas
CSS3 😎
Dividido en módulos por niveles y estados
caniuse.com
COMPATIBILIDAD
Permiten tomar decisiones según cómo el usuario interactúa con la página
DEMO
😰
.button-label:hover {
border: 10px solid #00AF64;
}
DEMO
@media (hover: hover) and (pointer: fine) {
.button-label:hover {
border: 10px solid #00AF64;
}
}
🥳
COMPATIBILIDAD
Establece como se debe cambiar el contenido de un replace element (<img>, <video>, etc.) para que se ajuste a su contenedor
.img {
object-fit: fill | contain | cover | none | scale-down;
object-position: [left right] | [top bottom] | center;
object-position: 20% 70%;
object-position: 20px 150px;
}
DEMO
COMPATIBILIDAD
También llamadas "variables de CSS" permiten la declaración y el uso de valores usados en otras declaraciones de la hoja de estilo.
:root {
/* variable de ámbito global */
--main-bg-color: brown;
}
.foo {
background-color: var(--main-bg-color);
color: var(--font-color, red);
border-color: var(--my-var, var(--my-background, pink));
}
Desde CSS podemos obtener, modificar y crear propiedades personalizadas
.foo {
--background: #ccc;
background-color: var(--background);
transition: background-color 1s;
}
.foo:hover {
--background: #cce;
}
Las reglas de herencia en CSS también se aplican a las custom properties
<div class="uno">
<div class="dos">
<div class="tres"></div>
<div class="cuatro"></div>
</div>
</div>
.dos {
--test: 10px;
}
.tres {
--test: 2em;
}
En este caso, los resultados de var(--test) son:
Desde Javascript podemos obtener, modificar y crear propiedades personalizadas
var element = document.querySelector('...');
// Obtener la valor desde el estilo inline
element.style.getPropertyValue("--my-var");
// Obtener valor desde cualquier lugar
getComputedStyle(element).getPropertyValue("--my-var");
// Establecer valor en estilo inline
element.style.setProperty("--my-var", jsVar + 4);
// Obtener valor global (:root)
getComputedStyle(document.documentElement).getPropertyValue('--color');
// Asignar valor global (:root)
document.documentElement.style.setProperty('--color', 'blue');
// Eliminar una custom property global (:root)
document.documentElement.style.removeProperty('--color');
DEMO
DEMO
DEMO
COMPATIBILIDAD
Establece qué hace el navegador cuando se llega a los límites de desplazamiento de una capa
.demo {
/* Valores de la palabra clave */
overscroll-behavior: auto; /* default */
overscroll-behavior: contain;
overscroll-behavior: none;
/* Establece valor para eje X e Y */
overscroll-behavior: auto contain;
/* Sólo establece valor para un eje */
overscroll-behavior-x: contain;
overscroll-behavior-y: contain;
}
DEMO
body {
}
.modal {
overflow: auto;
}
.line {
border-bottom: 1px solid #ccc;
padding: 10px;
}
<div class="line">Line 01</div>
<div class="line">Line 02</div>
...
<div class="modal">
<div class="line">Modal 01</div>
<div class="line">Modal 02</div>
..
</div>
😩
DEMO
😎
body {
overscroll-behavior: none;
}
.modal {
overflow: auto;
overscroll-behavior-y: contain;
}
.line {
border-bottom: 1px solid #ccc;
padding: 10px;
}
<div class="line">Line 01</div>
<div class="line">Line 02</div>
...
<div class="modal">
<div class="line">Modal 01</div>
<div class="line">Modal 02</div>
..
</div>
COMPATIBILIDAD
Permite forzar la posición de scroll final del viewport de un contenedor con scroll una vez la acción de scroll ha terminado
.demo {
/* Propiedad para el contenedor */
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ];
scroll-padding: 10px 15px 12px 14px;
/* Propiedad para los hijos */
scroll-snap-align: none | start | end | center;
scroll-margin: 10px 15px 12px 14px;
}
Polyfill recomendado: css-scroll-snap-polyfill
🥺
DEMO
DEMO
DEMO
COMPATIBILIDAD
COMPATIBILIDAD
@supports (display: grid) {
div {
display: grid;
}
}
@supports not (display: grid) {
div {
float: right;
}
}
result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display: flex");
result = CSS.supports("(--foo: red)");
result = CSS.supports(`(transform-style: preserve) or (-moz-transform-style: preserve)`);
// result is true or false
COMPATIBILIDAD