7 increíbles nuevas técnicas CSS para 2019

Publicado: 2019-05-01

Este es el momento adecuado para elegir el desarrollo web como una opción de carrera. Al igual que los diseñadores web, los desarrolladores web también están fascinados con las formas de probar nuevas técnicas de CSS y superar los límites de lo que CSS puede hacer.

Aquí, echaremos un vistazo a algunas de las nuevas técnicas CSS y especificaciones completas que se están abriendo paso en los diseños creativos. Puede controlar casi cualquier aspecto de un diseño mediante un CSS bien descrito. Además, puede mejorar las experiencias generales del usuario, con un código más limpio y consistente.

1. Letra inicial

Letra inicial es una propiedad de CSS, propiedad que selecciona la primera letra del elemento y especifica el número de líneas que ocupa la letra. La mayoría de las veces se usa en medios impresos y sitios de información, sitios de noticias, donde la primera letra del párrafo está mucho más arriba que el resto del contenido.

La propiedad initial-letter ajusta automáticamente tanto el número de líneas necesarias para crear la letra capitular estilizada como el tamaño de fuente. Initial-letter aprueba los siguientes valores:

<número> se refiere a cuántas líneas ocupa la letra en las que no se aceptan valores negativos;
normal es útil si desea restablecer el valor si se puede heredar de la cascada y no se aplica ningún efecto de escala a la primera letra;
<entero> determina el número de líneas en las que debe hundirse la letra cuando se preestablece su tamaño. Los valores deben ser mayores que cero y, si no se especifica el valor, el valor del tamaño se duplica y se eleva al número entero positivo más cercano;

El ::first-letter pseudo-element se puede utilizar para seleccionar caracteres que se formatearán como letras iniciales. El ::first-letter pseudo-element no selecciona la primera letra del elemento que tiene la visualización: en línea, pero solo funciona en elementos que tienen un valor de visualización de bloque, celda de tabla, título de tabla o elemento de lista .

<!DOCTYPE html>
<html>
<head>
<style>
p {
 font-family: Serif;
 font-size: 20px;
 margin-bottom: -15px;
}
h1 {
 font-family: Sans-serif;
 font-size: 3.1em;
 color: black;
}
body {
 padding: 10px;
}
div {
 width: 550px;
 line-height: 25px;
}
p:first-of-type:first-letter {
 background-color: black;
 color: white;
 float: left;
 font-size: 50px;
 margin-right: 10px;
 margin-top: 7px;
 padding: 18px;
 box-shadow: 0 0 10px -2px black;
}
</style>
</head>
<body>
<h1>About initial letter</h1>
<div>
<p>Only one who devotes himself to a cause with his whole strength and soul can be a true master. For this reason mastery demands all of a person"</p>
<p>"Concern for man and his fate must always form the chief interest of all technical endeavors. Never forget this in the midst of your diagrams and equation"</p>
</div>
</body>
</html>

Initial letter

2. Fuentes variables

Las fuentes variables representan un nuevo conjunto de características definidas como parte de la especificación OpenType y permiten que los archivos de fuentes contengan múltiples variaciones de una fuente en un solo archivo, denominado fuente variable. En la práctica, le permite acceder a las variables contenidas en el archivo de fuente con solo una referencia @ font-face. Además, las fuentes variables permiten funciones como la transición de estilos de fuente, estilos de fuente personalizados y animación. El beneficio de usar la fuente variable es que tiene acceso a la gama completa de estilos, pesos y anchos disponibles.

Las fuentes variables definen sus variaciones a través de ejes de variación y hay 5 ejes estándar:

ital: el eje de cursiva funciona de manera diferente porque está habilitado o deshabilitado, no hay términos intermedios. El valor se puede establecer mediante la propiedad CSS de estilo de fuente. Además, al introducir font-síntesis: ninguno, evitará que los navegadores apliquen accidentalmente el eje de variación y una cursiva sintetizada.
wght: controla el peso de la fuente y el valor se puede establecer usando la propiedad CSS font-weight.
wdth: controla el ancho de la fuente y el valor se puede establecer usando la propiedad CSS font-width. En CSS usando la propiedad font-stretch, podemos establecer el ancho de la fuente con valores porcentuales y si proporcionamos un valor que está fuera de la fuente- dominio codificado, el navegador crea la fuente en el valor permitido más cercano.
opsz: el tamaño óptico se refiere a la práctica de cambiar el tamaño óptico de la fuente y el valor se puede establecer usando CSS font-optical-sizing. Los valores de tamaño óptico se aplican automáticamente según el tamaño de la fuente, pero se pueden manipular usando la variación de fuente -settings. Cuando se usa font-optical-sizing, los valores admitidos son auto o none, y cuando se usa font-variation-settings, se proporciona un valor numérico.
slnt: controla la inclinación de la fuente y el valor se puede establecer usando la propiedad CSS de estilo de fuente. Es variable al expresarse como un rango numérico, y esto permite que la fuente varíe en cualquier lugar a lo largo de ese eje.

Uso de fuentes variables con @font-face: al usar fuentes variables en la web, esto implica definir reglas @ font-face que indican archivos de fuentes variables. Aquí hay 2 enlaces que le permiten encontrar fuentes variables: axis-praxis.org y v -fuentes.com.

<!DOCTYPE html>
<html>
<head>
<title>About variable fonts</title>
</head>
<style>
@font-face {
  font-family: 'Avenir Next Variable';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
  font-family: 'Avenir Next Variable', sans-serif;
}
p {
  font-variation-settings: 'wght' 630, 'wdth' 88;
}
</style>
<body>
<h1>About variable fonts</h1>
<h2>About variable fonts</h2>
<p>
	"Any intelligent fool can make things bigger and more complex… It takes a touch of genius – and a lot of courage to move in the opposite direction."
</p>
</body>
</html>

Variablefonts

3. Propiedades y valores lógicos

Propiedades y valores lógicos es un módulo de CSS que introduce propiedades y valores lógicos que hacen posible controlar la apariencia a través de direcciones lógicas y asignaciones de dimensiones. Las propiedades y valores lógicos usan términos como bloque y en línea para describir la dirección en la que fluyen. La especificación de propiedades y valores lógicos caracteriza las asignaciones de valores físicos en sus relaciones lógicas.

La dimensión en línea: es la dimensión a lo largo de la cual se escribe una línea de texto en el tipo de escritura utilizado. Entonces, en un documento aleatorio en inglés, el texto es horizontal, de izquierda a derecha, en otro documento árabe, la escritura también es horizontal pero de derecha a izquierda y si tenemos en cuenta un documento japonés, la dimensión en línea ahora es vertical porque el el modo de escritura se ejecuta verticalmente.

La dimensión del bloque: corresponde al orden en que se muestran los bloques en la página. En inglés y árabe se ejecutan verticalmente, mientras que en cualquier modo de escritura vertical se ejecutan horizontalmente.

<!DOCTYPE html>
<html>
<head>
<style>
html {
  font: 20px Sans-serif;
}
body {
  padding: 25px;
  background-color: lightyellow;
  color: black;
}
.box {
  border: 4px solid black;
  border-radius: 20px;
  padding: 20px;
  margin: 12px;
}
.one {
  block-size: 100px;
  inline-size: 200px;
}
.two {
  height: 100px;
  width: 200px;
}
</style>
</head>
<body>
</div>
<div id="container">
<div class="box one">
  My block-size is 100 pixels, my inline-size 200px.
</div>
<div class="box two">
  My height is 100 pixels, my width 200px.
</div>
</div>
</body>
</html>

Logical properties and values

4. Ajuste de desplazamiento

La propiedad CSS de tipo scroll-snap determina la rigidez con la que se aplican los puntos de conexión al contenedor de desplazamiento. En otras palabras, bloquea la ventana gráfica en ciertos elementos o ubicaciones después de que el usuario haya terminado de desplazarse. Es una excelente manera de mostrar galerías de imágenes. .Anteriormente, se podía usar con JavaScript, pero gracias al nuevo módulo CSS Scroll Snap, el efecto se puede controlar en CSS. El ajuste de desplazamiento se realiza definiendo el elemento principal/contenedor y los elementos secundarios en el contenedor que se ajustarán de acuerdo con el reglas definidas dentro del contenedor. La propiedad de tipo de ajuste de desplazamiento es la propiedad más importante que se aplica al elemento contenedor. Define el eje de ajuste de desplazamiento x, y, bloque, en línea o ambos y el rigor de ajuste de desplazamiento ninguno, proximidad u obligatorio.

<!DOCTYPE html>
<html>
<head>
<style>
html, body, .C {
  height: 50%;
}
.C {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: arial;
}
.container {
  display: flex;
  flex: none;
  overflow: auto
}
.container.x {
  width: 70%;
  height: 150px;
  flex-flow: row nowrap;
}
.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}
.x.container> div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}
.y.container> div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 256px;
}
.y.container>div:{
  line-height: 1.4;
  font-size: 80px;
}
.container >div:{
  background-color: white;
}
.container >div:{
  background-color: white;
}
</style>
</head>
<body>
<div class=".C">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>Scroll Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>About Scropp Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>

Scroll snapping

5. Nivel de cuadrícula 2 y subcuadrícula

La especificación de nivel 2 contiene todo lo del nivel 1 y algunas características nuevas. El nivel 2 de la especificación de cuadrícula crea la función de subcuadrícula de CSS Grid. En las siguientes líneas, veremos la función de subcuadrícula tal como se detalla actualmente en el Borrador del editor del Nivel de cuadrícula 2. Entonces, puede crear cuadrículas cuando usa el Opción de diseño de cuadrícula, un elemento de cuadrícula se puede transformar en un contenedor de cuadrícula configurando display: grid en él. En el ejemplo a continuación, tengo un elemento que incluye 3 pistas de columna de la cuadrícula, es una cuadrícula de contenedor con 3 pistas de columna y estos no se alinean con las huellas del padre.

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Level 2 - subgrid</title>
</head>
<style>
body {
  margin: 20px;
}
.one {
  background-color: black;
  color: white;
  border-radius: 20px;
  padding: 20px;
  font-size: 120%;
}
.A .one {
  background-color: lightgrey;
}
.GRID {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3fr 1.5fr 2fr 1fr 1fr 2fr;
  background-color: white;
  color: black;
  margin: 1.5em 0;
}
.A {
  padding: 0;
  grid-gap: 15px;
  grid-column: auto / span 4;
  display: grid;
  grid-template-columns: 3fr 1.5fr 1.5fr;
}
</style>
<body>
<div class="GRID">
<div class="one 1">1</div>
<div class="one 2">2</div>
<div class="one 3">3</div>
<div class="one 4">4</div>
<div class="one 5">5</div>
<div class="one 6">6</div>
<div class="one 7">7</div>
<div class="one 8">8</div>
<div class="one A">
<div class="one 9">9</div>
<div class="one 10">10</div>
<div class="one 11">11</div>
<div class="one 12">12</div>
<div class="one 13">13</div>
<div class="one 14">14</div>
</div>
<div class="one 15">15</div>
<div class="one 16">16</div>
<div class="one 17">17</div>
<div class="one 18">18</div>
<div class="one 19">19</div>
<div class="one 20">20</div>
</div>
</body>
</html>

Grid level 2 and subgrid

Al ser un proyecto de código abierto, puedes ver en GitHub cómo evoluciona el trabajo en el grupo CSS. El desarrollo de las especificaciones y la implementación del navegador es un proceso circular. Para que pueda ver cómo progresa esta función de subcuadrícula y las implementaciones emergentes del navegador.

6. Usa CSS para probar la compatibilidad con el navegador

CSS ha desarrollado una forma de probar la compatibilidad del navegador con nuevas funciones. Básicamente, haga una pregunta para averiguar si el navegador acepta una función CSS específica. De esta manera, las nuevas funciones se utilizan de una manera segura y concisa. Al usar cualquier nueva función CSS, debe verificar si el navegador admite esa función. En esta línea, se recomienda consultar los datos en caniuse.com, donde puede importar los datos de su ubicación.

Use CSS to test browser support

El @supports CSS le permite especificar declaraciones que dependen del soporte del navegador para funciones CSS, lo que se denomina consulta de funciones. Esta regla se puede escribir en la parte superior del código o se puede anidar dentro de cualquier otra regla-at del grupo condicional.

@supports (display: grid) {
  div {
    display: grid;
  }
}

7. Mejoras de sintaxis para consultas de medios: nivel 4

La especificación Media Queries Level 4 contiene algunas mejoras en la sintaxis para realizar consultas de medios utilizando funciones que tienen un tipo de rango, como alto y ancho.

Para ejemplificar, usamos max-functionity para ancho

@media (max-width: 20em)

Podemos probar un ancho entre dos valores aleatorios usando min- y max-

@media (min-width: 20em) and (max-width: 35em)

Para una mejor comprensión, en el ejemplo de arriba queremos decir que el ancho es mayor o igual a 20em y menor o igual a 35em

Conclusión

Los desarrolladores de sitios web deben conocer las nuevas técnicas de CSS y aplicarlas en proyectos futuros. Mejorarán sus estándares de trabajo y los clientes estarán satisfechos con la apariencia mejorada del sitio web.