es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Una mirada a: regla de documento CSS4

Muchos sitios web tienen muchas páginas, pero todas esas páginas tienen un estilo común con una sola hoja de estilo. Servir solo una hoja de estilo es una buena práctica para minimizar las solicitudes HTTP, lo que permite que las páginas se carguen más rápidamente en un navegador.

Sin embargo, habrá un grupo de reglas de estilo contenidas en la hoja de estilo que son innecesarias para algunas páginas. Entonces, ¿no sería genial si pudiéramos aplicar un conjunto de reglas de estilo solo para ciertas páginas mientras lo mantenemos en una hoja de estilo?

Esta idea se haría posible con la nueva regla de reglas de CSS estándar propuesta llamada @document . Esta regla se propuso inicialmente como parte de CSS3, pero debido a varios problemas, se pospuso y probablemente se incluiría en el Nivel 4 de CSS.

Veamos cómo funciona, ¿de acuerdo?

Uso Básico

@document nos permite designar reglas de estilo solo para páginas específicas. Como se indica en la Propuesta, está diseñado principalmente para la hoja de estilo del usuario. Por lo tanto, los usuarios pueden hacer lo siguiente para personalizar sus sitios web (favoritos):

 @document domain ("facebook.com") {body {background-color: yellow; } a {color: rojo; } img {border-radius: 100%; }} @document domain ("twitter.com") {body {background-color: red; } a {color: rosa; }} 

Puede visitar UserStyles.org para obtener excelentes ejemplos de hojas de estilo de usuario.

Nosotros, como autores web, también podemos utilizar @document para controlar los estilos en nuestro sitio web. Digamos que queremos que nuestras reglas de estilo se apliquen en una página en particular en nuestro sitio web. Para hacer eso, podemos encapsular las reglas de estilo con @document manera:

 @document url ("https://www.hongkiat.com/blog/about-us/") {h1 {font-size: 50em; color verde; } p {color: rojo; } a {color: azul; }} 

La diferencia entre domain() (del primer ejemplo) y url() es que domain() afectará a todas las páginas alojadas en el dominio especificado, mientras que url() solo aplicará las reglas de estilo a la URL especificada; las otras URL (o páginas) no se ven afectadas.

Puede usar url-prefix() para designar reglas de estilo a una URL que comienza con, por ejemplo, css .

 @document url-prefix ("https://www.hongkiat.com/blog/category/") {h2 {font-family: "Georgia"; } div {color de fondo: azul; color: #fff; }} 

Usando la función regexp(), podemos profundizar más en la expresión regular (Regex). El siguiente ejemplo se deriva del W3C, y el Regex coincide con el URL que comienza con http://www.w3.org/TR/, seguido por 4 dígitos numéricos y termina con 8 dígitos numéricos.

 @document regexp ("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {body {transform: rotate (90deg) ; }} 

Conclusión

Bien, hemos visto algunas posibilidades de uso de la regla @document . Pero como se mencionó, actualmente está en espera para CSS4, y Firefox es el único navegador que lo implementó con el prefijo de @-moz-document . No obstante, estaremos pendientes del desarrollo de la regla @document y veremos cómo evoluciona en el futuro.

Consejos de diseño de logo para principiantes

Consejos de diseño de logo para principiantes

Nota del editor: esta publicación fue escrita por Vlad Shvets para Hongkiat.com. Vlad trabaja para Vectr mencionado en el contenido.Cada empresa, profesional independiente o profesional independiente necesita un logotipo . Una vez que decida que es hora de comenzar una empresa, la pregunta de diseño del logotipo aparecerá de inmediato. A

(Consejos de tecnología y diseño)

38 hermosos fondos de pantalla de dibujos animados para su escritorio

38 hermosos fondos de pantalla de dibujos animados para su escritorio

Una de las características más amigables para el hombre para el sistema operativo como Windows es probablemente su capacidad para cambiar la imagen que se muestra en la pantalla del escritorio, también conocido como Desktop Wallpaper. Puede ser la foto de tu amiga o una ilustración tipográfica profesional, pero si eres como yo y prefieres un entorno informático más relajante, ¡los fondos de pantalla animados son probablemente para ti!No, no

(Consejos de tecnología y diseño)