¿Qué hay de nuevo después de CSS3 2015? | trucos CSS

.card {
  display: grid;
  grid-template-columns:
    150px 1fr;
  gap: 1rem;
}
.card .nav {
  display: flex;
  gap: 0.5rem;
}

diseño

Si no ha aprendido Flexbox y Grid, realmente debería hacerlo: realmente son las piedras angulares del desarrollo de CSS en la actualidad. Incluso más que cualquier cosa que obtuvimos en CSS3.

Cuando te refieres a subredes y albañileríaninguno de ellos es un navegador cruzado confiable, pero probablemente lo será pronto.

html {
  --bgColor: #70f1d9;
  
  --font-size-base: 
    clamp(1.833rem, 2vw + 1rem, 3rem);
  --font-size-lrg:
    clamp(1.375rem, 2vw + 1rem, 2.25rem);
}

html.dark {
  --bgColor: #2d283e;
}

Propiedades personalizadas de CSS

Las propiedades personalizadas también son importantes por varias razones. Pueden ser el asiento de los tokens de diseño en su proyecto, haciendo que el proyecto sea más fácil de mantener y consistente. Los temas de color son un gran caso de uso, como modo oscuro.

puedes hacerlo Diseño de todo el sitio web La mayoría de las propiedades personalizadas se utilizan. De esta manera, no puede ignorarlo a favor del viento Estos días. El enfoque para diseñar un sitio completo con clases en HTML resuena con muchas personas (y muchas personas lo hacen mal, así que no se preocupe si no funciona para usted).

@media 
  (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
  }
}

@media 
  (prefers-color-scheme: dark) {
  :root {
    --bg: #222;
  }
}

solicitar preferencias

La solicitud de preferencias suele ser @media Como hemos usado durante años para responder a solicitudes con diferentes tamaños de navegador, pero ahora incluye una forma de encontrar preferencias específicas del usuario a nivel de sistema operativo. Dos ejemplos son prefers-reduced-motion y prefers-color-schemeNos permiten construir interfaces más respetuosas con la experiencia de usuario deseada. Lee la publicación de Una.

.block {
  background: 
    hsl(0 33% 53% / 0.5);

  background:
    rgb(255 0 0);

  background:
    /* can display colors 
       no other format can */
    color(display-p3 0.9176 0.2003 0.1386)

  background:
    lab(52.2345% 40.1645 59.9971 / .5);}

  background:
    hwb(194 0% 0% / .5);
}

Cambios de color

La sintaxis de color pasa a funciones que aceptan alfa (transparencia) sin cambiar el nombre de la función. Por ejemplo, si desea un azul puro en la era CSS3, puede hacerlo rgb(0, 0, 255)Hoy, sin embargo, puede usar el estilo sin comas (ambos funcionan): rgb(0 0 255)y luego agregue alfa sin usar otras funciones: rgb(0 0 255 / 0.5)exactamente la misma situación hsl(). Solo un pequeño detalle y cómo se verán las futuras características de color. si solo Trabajo.

Hablando de la sintaxis del color futuro:

body {
 font-family: 'Recursive', sans-serif;
 font-weight: 950;
 font-variation-settings: 'MONO' 1, 'CASL' 1;
}

fuente variable

Las fuentes web se han convertido en algo importante en CSS3. Ya hay fuentes variables. Probablemente sepas que también existen. Ambos desbloquean algunas excelentes funciones de diseño y, a veces, son buenos para el rendimiento (por ejemplo, ya no tiene que cargar diferentes archivos de fuentes en negrita y cursiva en la misma fuente). fuente de color Si, pero yo diría que no ven mucha popularidad en la web apoya.

.cut-out {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.mask {
  mask: url(mask.png) right bottom / 100px repeat-y;
}

.move-me {
  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation: move 3s linear infinite;
}

@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}

sendero

SVG también explotó después de CSS3. Puedes cosecha recta cada artículo a través clip-pathque trae calidad CSS similar a SVG. No solo eso, sino que puede animar elementos en el camino, navegar por los elementos en el camino e incluso actualizar la ruta de los elementos SVG.

Todos se sienten conectados espiritualmente conmigo:

• clip-path - Nos permite literalmente cortar elementos en formas.
• masks: similar al recorte, pero la máscara puede tener otras propiedades, como un canal alfa basado en máscara.
• offset-path - Proporciona una ruta donde se puede colocar un elemento, generalmente para animarlo de esa manera.
• shape-outside - Proporciona caminos sobre elementos flotantes que envuelven otros elementos.
• d -SVG d propiedades de un <path> Se puede actualizar a través de CSS.

.disable {
  filter: 
    blur(1px)
    grayscale(1);
}

.site-header {
  backdrop-filter: 
    blur(10px);
}

.styled-quote {
  mix-blend-mode: 
    exclusion;
} 

filtro CSS

Ahora hay muchas manipulaciones de imágenes (sin mencionar otros elementos DOM) que se pueden realizar directamente en CSS. filterpero hay amigos y todos tienen diferentes aplicaciones.

Todos se sienten conectados espiritualmente conmigo:

• filter - Varios efectos útiles similares a Photoshop, como brillo, contraste, escala de grises, saturación, etc. El desenfoque es una fuerza muy singular.
• background-blend-mode "Me recuerda de nuevo". cómo photoshop combina capas. Multiplica las capas para oscurecer y combinar. Capas para mezclar fondos y colores. El aclaramiento y el oscurecimiento son efectos clásicos que tienen un beneficio real en el diseño web, y nunca se sabe cuándo los efectos de iluminación más esotéricos crearán una gran apariencia.
• backdrop-filter - las mismas habilidades que tienes filterpero solo ellos Adjuntar en el fondo en lugar de todo el elemento. Desenfocar solo el fondo es un efecto particularmente beneficioso.
• mix-blend-mode - las mismas habilidades que tienes background-blend-mode, pero tráigalo a todo el elemento, no solo al fondo.

import "https://unpkg.com/extra.css/confetti.js";

body {
  background: paint(extra-confetti);
  height: 100vh;
  margin: 0;
}

Houdini

Houdini Este es en realidad un conjunto de tecnologías que se basan principalmente en la extensión de CSS con JavaScript o al menos en la intersección de CSS y JavaScript.

• Paint API: devuelve una compilación de <canvas> API y se puede controlar a través de propiedades personalizadas.
• API de propiedades y valores / OM con tipo: proporciona tipos de valores (p. 10px) era originalmente una cadena.
• API de diseño: cree el suyo propio display Característica.
• API de animación

Combinados, hacen algunos verdadero Increíble demostración, a pesar de que Soporte de navegador descentralizadoParte de la magia de. Houdini es que viene como un Worklet que es muy fácil de importar y usar, por lo que tiene el potencial de modular características poderosas mientras lo hace fácil de usar.

my-component {
  --bg: lightgreen;
}

:host(.dark) { 
  background: black; 
}

my-component:part(foo) {
  border-bottom: 2px solid black;
}

sombra DOM

Shadow DOM aparece un poco si lo has jugado <svg> y <use> elemento. El elemento de clonación transmitido tiene un DOM de sombra que tiene restricciones sobre cómo "pasar" a través de él para elegir. Luego, cuando inicia sesión <web-components>, esta es la misma bola de cera.

Si alguna vez necesita diseñar sus componentes web, sepa que hay básicamente cuatro opciones para "externo". Puede estar interesado en aprender sobre sus propios módulos CSS y Mesas con estilo para construir.