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.

Herramientas principales que todo SEO debería utilizar en 2018

Como consultor de SEO, necesita un conjunto particular de herramientas para saber exactamente dónde se ubican sus competidores en los principales motores de búsqueda, cómo buscar palabras clave efectivas y rastrear nuevas oportunidades a medida que se desarrollan. Además, hay docenas de actividades, planes y campañas que deben ser gestionados. En

(Consejos de tecnología y diseño)

Jerga de JavaScript: 10 términos que debes saber

Desde el currying hasta los cierres, hay bastantes jergas de JavaScript (palabras especiales usadas en el campo) que saben que no solo te ayudarán a aumentar tu vocabulario, sino también a comprender mejor el JavaScript. Jargons se encuentran normalmente en documentaciones y artículos técnicos . Pero algunos de ellos, como los cierres, son cosas bastante estándar que deben conocerse. Sab

(Consejos de tecnología y diseño)