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 .

[xhtml]
<!DOCTYPEhtml>
<html>
<cabeza>
<estilo>
pags {
familia tipográfica: Serif;
tamaño de fuente: 20px;
margen inferior: -15px;
}
h1 {
familia tipográfica: Sans-serif;
tamaño de fuente: 3,1 em;
de color negro;
}
cuerpo {
relleno: 10px;
}
división {
ancho: 550px;
altura de línea: 25px;
}
p:primero-de-tipo:primera-letra {
color de fondo: negro;
color blanco;
flotador izquierdo;
tamaño de fuente: 50px;
margen derecho: 10px;
margen superior: 7px;
relleno: 18px;
caja-sombra: 0 0 10px -2px negro;
}
</estilo>
</cabeza>
<cuerpo>
<h1>Acerca de la letra inicial</h1>
<div>
<p>Solo quien se dedica a una causa con todas sus fuerzas y alma puede ser un verdadero maestro. Por eso el dominio exige todo de una persona"</p>
<p>"La preocupación por el hombre y su destino siempre debe ser el principal interés de todos los esfuerzos técnicos. Nunca olvide esto en medio de sus diagramas y ecuaciones"</p>
</div>
</cuerpo>
</html>
[/xhtml]

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. La ventaja 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.

[xhtml]
<!DOCTYPEhtml>
<html>
<cabeza>
<title>Acerca de las fuentes variables</title>
</cabeza>
<estilo>
@Perfil delantero {
familia de fuentes: 'Avenir Next Variable';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
familia de fuentes: 'Avenir Next Variable', sans-serif;
}
pags {
configuración de variación de fuente: 'wght' 630, 'wdth' 88;
}
</estilo>
<cuerpo>
<h1>Acerca de las fuentes variables</h1>
<h2>Acerca de las fuentes variables</h2>
<p>
"Cualquier tonto inteligente puede hacer las cosas más grandes y más complejas... Se necesita un toque de genialidad y mucho coraje para moverse en la dirección opuesta".
</p>
</cuerpo>
</html>
[/xhtml]

Variablefonts

3. Propiedades y valores lógicos

Propiedades y valores lógicos es un módulo 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 utilizan 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.

[xhtml]
<!DOCTYPEhtml>
<html>
<cabeza>
<estilo>
html {
fuente: 20px Sans-serif;
}
cuerpo {
relleno: 25px;
color de fondo: amarillo claro;
de color negro;
}
.caja {
borde: 4px negro sólido;
borde-radio: 20px;
relleno: 20px;
margen: 12px;
}
.una {
tamaño de bloque: 100px;
tamaño en línea: 200px;
}
.dos {
altura: 100px;
ancho: 200px;
}
</estilo>
</cabeza>
<cuerpo>
</div>
<div id="contenedor">
<div class="caja uno">
Mi tamaño de bloque es de 100 píxeles, mi tamaño en línea es de 200 px.
</div>
<div class="caja dos">
Mi altura es de 100 píxeles, mi ancho de 200 px.
</div>
</div>
</cuerpo>
</html>
[/xhtml]

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.

[xhtml]
<!DOCTYPEhtml>
<html>
<cabeza>
<estilo>
html, cuerpo, .C {
altura: 50%;
}
.C {
pantalla: flexible;
alinear elementos: centro;
justificar-contenido: espacio-entre;
flujo flexible: resumen de la columna;
familia tipográfica: arial;
}
.envase {
pantalla: flexible;
flexión: ninguno;
desbordamiento: automático
}
.contenedor.x {
ancho: 70%;
altura: 150px;
flujo flexible: fila nowrap;
}
.contenedor.y {
ancho: 256px;
altura: 256px;
flujo flexible: resumen de la columna;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y obligatorio;
}
.x.proximity-scroll-snapping {
scroll-snap-type: x proximidad;
}
.contenedor > div {
alineación de texto: centro;
desplazar-ajustar-alinear: centro;
flexión: ninguno;
}
.x.contenedor> div {
altura de línea: 128px;
tamaño de fuente: 64px;
ancho: 100%;
altura: 128px;
}
.y.contenedor> div {
altura de línea: 256px;
tamaño de fuente: 128px;
ancho: 256px;
altura: 256px;
}
.y.contenedor>div:{
altura de línea: 1,4;
tamaño de fuente: 80px;
}
.contenedor >div:{
color de fondo: blanco;
}
.contenedor >div:{
color de fondo: blanco;
}
</estilo>
</cabeza>
<cuerpo>
<div clase=".C">
<div class="contenedor x ajuste de desplazamiento obligatorio" dir="ltr">
<div>Ajuste de desplazamiento</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="contenedor y ajuste-desplazamiento-obligatorio" dir="ltr">
<div>Acerca del ajuste de Scropp</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</cuerpo>
</html>
[/xhtml]

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.

[xhtml]
<!DOCTYPEhtml>
<html>
<cabeza>
<title>Nivel 2 de cuadrícula CSS: subcuadrícula</title>
</cabeza>
<estilo>
cuerpo {
margen: 20px;
}
.una {
color de fondo: negro;
color blanco;
borde-radio: 20px;
relleno: 20px;
tamaño de fuente: 120%;
}
.Una {
color de fondo: gris claro;
}
.CUADRÍCULA {
pantalla: rejilla;
brecha de cuadrícula: 10px;
columnas de plantilla de cuadrícula: 3fr 1.5fr 2fr 1fr 1fr 2fr;
color de fondo: blanco;
de color negro;
margen: 1,5em 0;
}
.A {
relleno: 0;
brecha de cuadrícula: 15px;
columna de cuadrícula: auto / span 4;
pantalla: rejilla;
columnas de plantilla de cuadrícula: 3fr 1.5fr 1.5fr;
}
</estilo>
<cuerpo>
<div class="GRID">
<div class="uno 1">1</div>
<div clase="uno 2">2</div>
<div clase="uno 3">3</div>
<div class="uno 4">4</div>
<div class="uno 5">5</div>
<div class="uno 6">6</div>
<div class="uno 7">7</div>
<div class="uno 8">8</div>
<div clase="una A">
<div clase="un 9">9</div>
<div class="uno 10">10</div>
<div class="uno 11">11</div>
<div class="uno 12">12</div>
<div class="uno 13">13</div>
<div class="uno 14">14</div>
</div>
<div class="uno 15">15</div>
<div class="uno 16">16</div>
<div class="uno 17">17</div>
<div class="uno 18">18</div>
<div class="uno 19">19</div>
<div class="uno 20">20</div>
</div>
</cuerpo>
</html>
[/xhtml]

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.

[css]
@supports (pantalla: cuadrícula) {
división {
pantalla: rejilla;
}
}
[/css]

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

[css]
@media (ancho máximo: 20em)
[/css]

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

[css]
@media (ancho mínimo: 20em) y (ancho máximo: 35em)
[/css]

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.