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.

Las 10 mejores aplicaciones de video para Windows Phone

Las 10 mejores aplicaciones de video para Windows Phone

Hoy en día, tomamos videos con nuestros teléfonos móviles en varias ocasiones. Con la ayuda de aplicaciones móviles, también podemos grabar y editar el video inmediatamente antes de enviarlo o compartirlo en las redes sociales. Varias aplicaciones de terceros han sido equipadas con efectos visuales especiales preestablecidos que hacen que sea muy fácil crear un video atractivo. Pero

(Consejos de tecnología y diseño)

Surface Studio vs iMac - ¿Cuál debería elegir?

Surface Studio vs iMac - ¿Cuál debería elegir?

Microsoft presentó recientemente Surface Studio, su nueva computadora de escritorio que no solo satisface a su actual base de admiradores, sino también a aquellos que durante mucho tiempo han estado bajo el hechizo de Apple. La revelación en sí dio escalofríos a millones de tecnófilos y creativos, y al instante todos pensaron en lo mismo: "Quiero uno".Aquí

(Consejos de tecnología y diseño)