CSS3 algunas mejoras y variaciones html5

Hasta antes de las directivas de estilo, muchos elegían que sus diseños estuvieran realizados o mediante tablas o mediante el tag div, y la ventaja distintiva era que aparentemente eso tenía que ver con el posicionamiento.

Hasta antes de las directivas de estilo, muchos elegían que sus diseños estuvieran realizados o mediante tablas o mediante el tag div, y la ventaja distintiva era que aparentemente eso tenía que ver con el posicionamiento.
Ninguno de esos tags tiene mayor influencia en el posicionamiento porque ninguna de las dos indica nada sobre los contenidos del sitio, de manera que era una presunción poco confiable.
Algunos de los cambios son interesantes:
Uno de los problemas que presenta el código Html es que es difícil definir particularidades en la forma de verse determinada información o parte del código.
En html5, se usa la diferenciación entre código, y representación, en forma más clara, bajo la presunción que son aspectos que separados se pueden corregir mejor, ampliar, estudiar, y de este modo el tiempo de diseño disminuye, así como el de cambios o actualizaciones.
Por ello, con CS3, hay más opciones para maniobrar, generando más posibilidades para determinar estilos en los textos.
Estos son algunas de las mejoras:
En html, los atributos de los tags, no contaban con un estilo en particular.
En html se le podía asignar un estilo a un contenido, definiendo los atributos id y class.
En CS3, en el entorno del html5 es posible colocarle un estilo a cada atributo.
La diferencia parece sutil, pero es importante.
Por ejemplo:
Si queremos colocarle estilo a la siguiente frase:

<p>Esto es un ejemplo</p>

Podíamos generar un estilo en la hoja de estilo para el tag p, del siguiente modo:
P {
color=”ff0”;
}

Si quisiéramos realizar una excepción, tendríamos que definir un estilo exclusivamente para esa frase, usando id o class, para id, hay que usar un nombre precedido de un numeral.

#frase {
color=”ff0”;

}

Y en la línea de código:

<p id=”frase”>Esto es un ejemplo</p>

Si quisiéramos usar class, tendríamos que definir el estilo precedido de un punto:

.fraseo {
color=”ff0”;
}

Y en el código se indica con el atributo:

<p class=”fraseo”>Esto es un ejemplo</p>

La posibilidad de incluir un punto, delante de una definición de estilo, para los que tienen conocimiento de programación orientada a objetos, los remitirá a una forma conocida, pues es el modo en que se referencian estructuras complejas de datos.
Si escribiéramos del siguiente modo ese estilo:

p.fraseo {
color=”ff0”;

}

La regla, se aplica sólo a aquellos tag que tengan como atributo class el nombre fraseo y al resto le deja el estilo por defecto de p.

Aunque ya se consiguen sofisticadas aplicaciones de todos estos elementos, en CS3, se agregaron otras particularidades.

Por ejemplo, la posibilidad de generar un estilo para cada atributo.

Si queremos crear un estilo para aquellas frases que estando contenidas en el tag p, contengan un atributo name, la forma sería la siguiente:

P[name=”linea”]{
color=”ff0”;

}

Esto afectaría a este tipo de código:

<p name=”linea”>Esto es un ejemplo</p>

Y no afectaría a estos otros:

<p class=”linea”>Esto es otro línea de ejemplo</p>

Otras particularidades del uso, es que se puede profundizar la selección del alcance de la aplicación

Las siguientes formas:

P[name^=”linea”]{
color=”ff0”;

}

P[name$=”linea”]{
color=”ff0”;

}
P[name*=”linea”]{
color=”ff0”;

}
En el primer caso afectará a todos los atributos name que contengan en su nombre en el comienzo la palabra línea.
Ej:

<p name=”lineaprincipio”>Comentario</p>

En el segundo caso se verían afectados aquellos que terminan con la palabra línea:

Ej:

<p name=”finaldelinea”>Comentario</p>

En el último caso afectaría a todos los atributos que contengan la palabra línea.

Ej:

<p name=”principiodelineafinal”>Comentario</p>

Las nuevas directivas, estas y otras más, pues no se terminan aquí las novedades tienen la intención de proponer detalles específicos muy afinados para el diseño web.

Es cuestión de contar con un buen sistema de sitematización de denominación de elementos para no perderse en los detalles.
Con esto quiero decir que se debe establecer un convenio para nombres de estilos y relación con sus usos, bien documentado para no caer en la redundancia de nombres o lo que es peor, redundancia de trabajo en el código.
Las nuevas especificaciones de CS3 son interesantes porque amplían las posibilidades, pero también requieren de una adecuada atención en las denominaciones de las clases.
Lo mejor, como siempre, es tener el proyecto en manos que sepan organizar este tipo de programación.
En DataGestion contamos con diseño de estándares para el código que garantiza que es fácil de cambiar y de mantener, pues cuenta con una política de denominación de clases normalizada y alienta la documentación de los procesos a los fines de no convertir el proceso de creación de estilos en una multitud de procesos que se interfieren entre sí, sufriendo el sitio las consecuencias de lentitud o encareciendo el trabajo de programación.

  Ana Abregú

www.anaabregu.com.ar

www.datagestion.com.ar

http://posicionamientoenbuscadores.datagestion.com.ar

Ana Abregú.

Ana Abregú.

Ana Abregú

Este obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 3.0 Unported.