el poder
de
css3
Rubén Bernárdez
@rubenbpv
AGENDA
- Futuro del CSS
- CSS Filters
- Interaction Media Features
- Object fit & position
- Custom properties
- Overscroll behavior
- Scroll snap
El futuro de css
CSS1, CSS2, CSS2.1
especificaciones completas
CSS3 😎
Dividido en módulos por niveles y estados
EL FUTURO DE CSS
EL FUTURO DE CSS
caniuse.com
css filters
COMPATIBILIDAD
css filters
interaction media features
Permiten tomar decisiones según cómo el usuario interactúa con la página
interaction media features
DEMO
😰
.button-label:hover {
border: 10px solid #00AF64;
}interaction media features
DEMO
@media (hover: hover) and (pointer: fine) {
.button-label:hover {
border: 10px solid #00AF64;
}
}🥳
COMPATIBILIDAD
interaction media features
object fit & position
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;
}OBJECT FIT & POSITION
DEMO
OBJECT FIT & POSITION
COMPATIBILIDAD
CUSTOM PROPERTIES
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));
}
CUSTOM PROPERTIES
Desde CSS podemos obtener, modificar y crear propiedades personalizadas
.foo {
--background: #ccc;
background-color: var(--background);
transition: background-color 1s;
}
.foo:hover {
--background: #cce;
}CUSTOM PROPERTIES
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:
- Para el elemento class="dos": 10px
- Para el elemento class="tres": 2em
- Para el elemento class="cuatro": 10px (Heredado de su padre)
- Para el elemento class="uno": valor no válido, que es el valor predeterminado de cualquier propiedad personalizada.
CUSTOM PROPERTIES
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');CUSTOM PROPERTIES
DEMO
CUSTOM PROPERTIES
DEMO
CUSTOM PROPERTIES
DEMO
custom properties
COMPATIBILIDAD
OVERSCROLL-BEHAVIOR
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;
}OVERSCROLL-BEHAVIOR
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>😩
OVERSCROLL-BEHAVIOR
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>overscroll-behavior
COMPATIBILIDAD
scroll snap
Permite forzar la posición de scroll final del viewport de un contenedor con scroll una vez la acción de scroll ha terminado
SCROLL SNAP
.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;
}
SCROLL SNAP
Polyfill recomendado: css-scroll-snap-polyfill
🥺
SCROLL SNAP
DEMO
SCROLL SNAP
DEMO
SCROLL SNAP
DEMO
SCROLL SNAP
COMPATIBILIDAD
one more thing...
tip: modales simples sin js
COMPATIBILIDAD
tip: modales simples sin js
tip: css supports
@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 falseCOMPATIBILIDAD
tip: css supports
GRACIAS :)
El poder de CSS3
By rubenbp
