giok77

giok77

giok77

slot bonus new member

rumah88

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

"CSS3" es un gran éxito para CSS. Por lo general, muchas cosas caen a la vez, lo cual es excelente para nuestras manos en CSS. degradado, animation/transition, border-radius, box-shadow, transform¡Vamos! Aún mejor, apareció el nombre del banner CSS3 (y el paraguas mental "HTML5") y la industria simplemente Saturado en estudiar el material para todo esto. Vea todos los duplicados de "CSS3" publicados en CSS-Tricks a lo largo de los años.

Sin duda, muchas personas utilizaron estas tecnologías durante este tiempo. También creo que definitivamente hay mucha gente que no ha aprendido mucho de CSS. desde Entonces.

Entonces, ¿qué les decimos?

Otros tienen especulaciones similares Scott Vanderhay "CSS moderno en pocas palabras" Escribió un amigo suyo que no se ha mantenido al día con CSS desde 2015 y no sabe qué aprender. Intentaré explicar la lista de Scott y lo que ha cambiado desde CSS3.

Los preprocesadores todavía se usan ampliamente después de CSS3, pero las razones para su uso han disminuido, así que quizás no se preocupe. Esto incluye métodos más nuevos como Rellenar funciones futurasEsto incluye Autoprefixer. CSS-in-JS es común, pero solo para proyectos donde todo el flujo de trabajo ya está en JavaScript. Cuando esté en un proyecto relacionado, sabrá y podrá aprender la sintaxis cuando sea necesario. Por supuesto, debe aprender sobre propiedades personalizadas, flexboxes y redes.

Suena bien para mí. Pero permítanme hacer mi propia lista de extras después de CSS3 y expandir esa lista un poco.

¿Qué hay de nuevo después de CSS3?

Digamos alrededor de 2015 desde "CSS3".


.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).

Artículo Recomendado:  Fondos en movimiento | Trucos CSS - Trucos CSS
@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.

Artículo Recomendado:  Mensajes de Apple y contraste de color | trucos CSS

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.

Artículo Recomendado:  Agregue Vite a su aplicación web existente trucos CSS

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.

grupo de trabajo de CSS

Vale la pena señalar que cada año el grupo de trabajo de CSS tiene su propia forma de dibujar líneas en la arena e indicar dónde se encuentran ciertas especificaciones en un momento dado:

Pero estos son muy densos. Por supuesto, son una buena referencia y documentación, podemos ver lo que ha cambiado desde CSS3. Pero nunca enviaría a ningún desarrollador de primera línea a estos lugares para elegir qué aprender.

Sí, pero ¿qué pasará?

Yo diría que probablemente no estoy preocupado. 😉

El propósito de esto es aprender conocimiento útil. ahora Desde la época de CSS3. Pero si tienes curiosidad sobre el futuro de CSS...

  • Solicitud de contenedor Será un gran problema. Podrá elegir estilos en función del tamaño del elemento contenedor, no del tamaño individual del navegador. Se puede recargar hoy.
  • unidad de contenedor Ayudará con el tamaño en función del tamaño del elemento contenedor.
  • transformación independiente, Por ejemplo scale: 1.2;, es más lógico usar que siempre necesario transform.
  • invertido es una característica que tienen todos los preprocesadores CSS Siempre Luego, a los desarrolladores obviamente les gusta usar, especialmente para solicitudes de medios. Lo más probable es que lo consigamos pronto en el CSS nativo.
  • Alcance sería una forma de decirle a los bloques CSS que se apliquen solo a ciertas áreas (de la misma manera que lo hacen las bibliotecas CSS-in-JS) y ayudar con los conceptos de proximidad difíciles.
  • Capas en cascada Abre un concepto completamente nuevo de qué estilo "gana" en los elementos. Independientemente de los detalles, se preferirán los estilos de capas superiores a los estilos de capas inferiores.
  • Ver unidades Esto se mejorará significativamente mediante la introducción de longitudes de vista "relativas". Sería muy útil dvh y dvwporque tienen en cuenta el espacio real disponible en la ventana del navegador, evitando problemas terribles como la superposición de la interfaz de usuario del navegador con la interfaz de usuario del sitio.

Brahmus Van Dam en su "CSS en 2022". redondear. Parece que 2022 debería ser un año verdaderamente icónico para CSS. Quizás un año más icónico que 2015 para CSS3.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir