10 propiedades ocultas de CSS3 que debes saber

CSS3 ha hecho que el diseño web sea más emocionante con la introducción de nuevas propiedades. Si bien es posible que conozca los más populares, como la sombra de caja, el radio del borde y la transformación, hay muchas más propiedades de las que quizás no haya oído hablar o probado, pero le agradaría saber de su existencia.

W3C trabaja constantemente en nuevas propiedades CSS para mejorar la web para diseñadores, desarrolladores y usuarios. Mientras tanto, echemos un vistazo a estas 10 propiedades que quizás no conozca, pero que realmente debería consultar.

1. Tamaño de pestaña

La mayoría de los editores de código están equipados con Control de tamaño de pestaña que permite a los desarrolladores especificar el ancho de sangría de código realizado con el Lengüeta llave. Fue solo recientemente que también pudimos personalizar la sangría del código incrustado en las páginas web.

pre {
	tab-size: 2;
}

Tenga en cuenta que cada navegador puede tener su propia interpretación de la longitud de la unidad de ancho de tabulación. Por lo tanto, podemos esperar ver algunas discrepancias entre los diferentes navegadores. En términos de soporte del navegador, el tab-size La propiedad funciona en Chrome, Opera, Firefox y Safari según CanIUse.

tamaño de pestaña

2. Representación de texto

los text-rendering La propiedad le dirá a los navegadores cómo deben representar el texto dentro de las páginas web. El texto se optimizará para el rendimiento, la legibilidad o la precisión, lo que eventualmente determinará la calidad del texto. Eche un vistazo más de cerca al interletraje del texto en la siguiente captura de pantalla para comparar el texto "normal" y optimizedLegibility texto:

tamaño de representación
IMAGEN: Estéticamente Leal

Para obtener más consejos sobre una buena tipografía, consulte Tipografía práctica.

3. Estiramiento de fuente

Algunas fuentes proporcionan caras adicionales además de las normales Normal, Negrita y Cursiva. Helvetica Neue o Myriad Pro como ejemplo viene con caras como "Condensado", "Ultracondensado" y "Semi-condensado". Aquí es donde una nueva propiedad llamada font-stretch es presentado; nos permite aplicar estas caras.

normal condensado

Podemos usar font-stretch junto con la propiedad de fuente como, por ejemplo,font-style. Aquí hay un ejemplo:

h1 {
	font-style: bold;
	font-stretch: ;
}

los font-stretch Actualmente, la propiedad solo funciona en Firefox e Internet Explorer 9 (y versiones posteriores).

4. Desbordamiento de texto

los text-overflow La propiedad especifica la presentación del contenido que su contenedor desborda o trunca. El valor predeterminado se establece en clip que simplemente oculta el texto truncado. Alternativamente, puede configurarlo en ellipsis para representar el texto o contenido truncado con puntos suspensivos horizontales, de la siguiente manera.

.content-box {
	text-overflow
}

En caso de que se pregunte, los puntos suspensivos horizontales son los tres puntos al final, que generalmente indican contenido omitido.

desbordamiento de texto

5. Modo de escritura

No todos los idiomas se escriben de izquierda a derecha. En cambio, algunos idiomas se escriben de arriba a abajo como el japonés o de derecha a izquierda como el árabe y el hebreo.

modo de escritura
IMAGEN: AimiriFont

Para acomodar estos idiomas, una nueva propiedad llamada writing-mode se presenta para permitir a los desarrolladores cambiar la dirección de escritura de contenido a través de CSS. Este fragmento de código, como ejemplo, dirige el flujo de contenido de izquierda a derecha (independientemente del idioma).

p {
	writing-mode: rl-tb;
}

Para cambiar el flujo de contenido, moviéndose de arriba a abajo, establezca la propiedad con vertical-lr valor:

p {
	writing-mode: vertical-lr;
}

6. Eventos de puntero

los pointer-events La propiedad nos permite controlar el comportamiento del elemento bajo eventos de puntero como arrastrar, desplazar y hacer clic. Con esto, el enlace afectado no hará nada cuando se haga clic; el enlace estará completamente deshabilitado y ni siquiera dirigirá a los usuarios a la dirección especificada en el href atributo.

a {
	pointer-events: none;
}

Sin embargo, debido a algunos problemas críticos, el pointer-events la propiedad se pone en espera hasta la próxima revisión de CSS, CSS4.

7. Orientación de la imagen

En un editor de imágenes como Photoshop, puede cambiar la orientación de la imagen girando o volteando la imagen. Ahora CSS3 le permite hacer lo mismo con las imágenes en las páginas web a través de una nueva propiedad llamada image-orientation. Aquí hay un ejemplo de cómo podemos voltear una imagen horizontalmente usando esta propiedad.

img {
	image-orientation: flip;	
}

También puede conservar la orientación de la imagen original especificando el valor de la propiedad from-image, al igual que.

img {
	image-orientation: from-image;
}

8. Representación de imagen

Similar a text-rendering propiedad, image-rendering define la calidad de la imagen en las páginas web, en particular cuando la imagen cambia de tamaño con fuerza. Con el advenimiento de esta propiedad viene una serie de nuevos valores, y los navegadores tienen sus propias especificaciones en este asunto. los crisp-edges El valor, por ejemplo, que conserva el contraste y evita los bordes borrosos de las imágenes, se traduce actualmente como -webkit-optimize-contrast en navegadores Webkit y nearest-neighbor en Internet Explorer

img {
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast;/* Webkit */
	-ms-interpolation-mode: nearest-neighbor;  /* IE */
}

Es una tecnología experimental, por lo que probablemente veremos algunos cambios en la implementación.

9. Columnas

los columns La propiedad permite a los desarrolladores organizar el contenido web en columnas con facilidad. Dividimos el contenido en dos columnas como esta:

.content {
	columns: 2;
}

En los navegadores que admiten esta propiedad, como Chrome y Safari, veremos el contenido organizado de esa manera.

columnas "ancho =" 500 "altura =" 183 "src =" https://arenalnoticias.com/wp-content/uploads/2019/11/1574431644_551_10-propiedades-ocultas-de-CSS3-que-debes-saber.jpg "/><span class=

Junto con CSS Shape y un poco de creatividad, puede tener un diseño de contenido fluido y más atractivo muy parecido a lo que ve en una revista de moda en sus sitios web.

10. Flex

los flex La propiedad tiene como objetivo hacer que la cuadrícula receptiva sea más fluida al tiempo que resuelve un par de problemas en el método convencional actual para la disposición del diseño web: float propiedad.

Además de eso, al usar la propiedad flex, el diseño web tomará toda la altura de su contenedor, lo que fue bastante engorroso de tratar anteriormente (eche un vistazo a nuestra publicación anterior sobre este asunto: Igual altura de columna con CSS).

Ahora, suponiendo que desea crear un diseño web que consta de tres columnas, puede tener el marcado organizado de esta manera.

Column 1
Column 2
Column 3

Luego, conviértalos en columnas usando el flex propiedad, así.

#container {
	width: 600px;
	height: 300px;
	display: flex;
}
#container .col {
	flex: auto;
}

Con la adición de estilos decorativos como fuente y color de fondo, obtendremos el siguiente resultado.

flex "width =" 500 "height =" 265 "src =" https://arenalnoticias.com/wp-content/uploads/2019/11/1574431644_917_10-propiedades-ocultas-de-CSS3-que-debes-saber.jpg "/><span class=

Deja un comentario

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