{"id":192,"date":"2013-09-01T23:27:55","date_gmt":"2013-09-01T23:27:55","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/seadtoha\/?p=192"},"modified":"2013-09-01T23:28:18","modified_gmt":"2013-09-01T23:28:18","slug":"el-futuro-de-la-web-con-css4","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/seadtoha\/2013\/09\/01\/el-futuro-de-la-web-con-css4\/","title":{"rendered":"El futuro de la WEB con CSS4"},"content":{"rendered":"
\n

La web sigue creciendo r\u00e1pidamente, desde la salida de HTML5 al mercado todos los desarrolladores y muchas compa\u00f1\u00edas se han dado cuenta que esto no puede quedarse atr\u00e1s y se ha iniciado una carrera entre los navegadores web por estar a la vanguardia en cuanto a estas tecnolog\u00edas.<\/p>\n

Un ejemplo visual lo proporciona la pagina: http:\/\/html5readiness.com\/<\/a> en la cual veremos claramente como cada navegador est\u00e1 en su propia carrera para soportar componentes nuevos como HTML5, CSS3 y JS.<\/p>\n

\u00a0\"\"<\/a><\/p>\n

Todos los dise\u00f1adores de sitios web tienen claro que desde CSS que se deb\u00eda separar el contenido del texto, ya que de esta manera HTML es nuestro sitio web limpio y todos los estilos, efectos e im\u00e1genes ser\u00e1n proporcionadas por nuestra hoja de estilos CSS, d\u00e1ndonos la libertad de cambiar estilos a todo nuestro website editando un solo documento maestro y sin tener que poner el sitio en mantenimiento en ning\u00fan momento, y lo m\u00e1s importante con la seguridad de estar cambiando solo el aspecto visual de la pagina.<\/p>\n

CSS3 est\u00e1 disponible desde el 2011 y muchos programadores han experimentado cosas nuevas con este c\u00f3digo, est\u00e1 lleno de funciones interesantes, desde transiciones y efectos din\u00e1micos hasta dibujos! hay programadores que han dibujado con CSS3!<\/p>\n

\"\"<\/a>

Dibujo hecho con CSS3<\/p><\/div>\n

\"\"<\/a>

W3C<\/p><\/div>\n

Y no se detiene ah\u00ed ya que hay muchas p\u00e1ginas que se han dedicado a publicar ejemplos del potencial de CSS3 de manera gratuita, hay mucho c\u00f3digo con ejemplos que se comparten de manera gratuita en la internet, dejando a el programador la libertad de tomarlo y experimentar con \u00e9l, pero para todas las bondades que ofrece CSS3 esto sigue creciendo ya que la W3C ha estado trabajando paralelamente en la versi\u00f3n CSS4.<\/p>\n

<\/h1>\n

Salida CS4<\/h1>\n

Las especificaciones t\u00e9cnicas de CSS4 ya est\u00e1n escritas, muchas de estas ideas de lo que el W3C est\u00e1 esperando en el CSS4 Especificaci\u00f3n de Selectores.
\nLas 2 ediciones m\u00e1s sonadas son \"not\" y \"matches\" ya antes en CSS3 estaba el selector :not() pero el selector ;matches() es lo nuevo.
\nNot<\/em>
\nEn las especificaciones de CS4 dice que
\n:not()<\/em>
\npuede ser usado para ambos selectores y pseudo clases. no trabajara con
\n:after<\/em> o :before<\/em>
\npero todo lo dem\u00e1s funcionara bien. Supongamos que deseas aplicar un estilo a todo excepto los links ser\u00eda algo as\u00ed:<\/p>\n

*|*:not(:link):not(:visited) {\r\n\u00a0\u00a0\u00a0 \/* Some CSS *\/\r\n}<\/pre>\n
Muy \u00fatil en un proyecto largo ya que esto ciertamente cortara l\u00edneas de c\u00f3digo los cual nos lleva a matches()<\/em>
\nAgrego que *|* es un car\u00e1cter regla general que significa \"Aplicar a todo\" y se aplicara a todos los elementos CSS.<\/p>\n
Matches<\/h1>\n
matches() literalmente empareja cualquier pseudo clase, no puedes mezclar matches() y not(). Las especificaciones mencionan que esto:
\n:matches(:not( ... ))<\/em>
\nno es posible, lo cual tampoco tendr\u00eda mucho sentido, aqu\u00ed hay un ejemplo de c\u00f3mo se aplica a todos los objetos que tengan estado :hover<\/p>\n
*|*:matches(:hover) {\r\n\u00a0\u00a0\u00a0\u00a0 \/* Some CSS *\/\r\n}<\/pre>\n
Variedad de Selectores directos<\/h1>\n
Habr\u00e1n algunos nuevos selectores, pero tendr\u00e1n varios usos.<\/p>\n
Reference Combinators<\/h2>\n
Este es complejo, digamos que tenemos estas l\u00edneas de c\u00f3digo:<\/p>\n
&lt;label for=&quot;name&quot;&gt;Your Name&lt;\/label&gt;\r\n&lt;input id=&quot;name&quot; type=&quot;text&quot; \/&gt;<\/pre>\n
El atributo for, por defincion deberia ser el mismo que la ID de ingreso, tiene que ver con elementos conectados. Esta pseudo class te permite apuntar elementos conectados. Si se desea apuntar el input cuando la etiqueta esta hover se podria escribir esto:<\/p>\n
label:hover \/for\/ input {\r\n\u00a0\u00a0\u00a0 \/* CSS goes here *\/\r\n}<\/pre>\n
Apuntar Padres<\/h2>\n
en CSS la ultima cosa que escribes es generalmente lo que estas apuntando:<\/p>\n
div a {\r\n\u00a0}<\/pre>\n
Todos los que hemos trabajado con CSS sabemos que estamos seleccionando todas las anclas de divs. Con este selector podemos usar la misma sintaxis, pero apuntar al div, podra sonar inutil pero si tu quisieras hacer eso solo removerias el a y eso haria que busques el div de manera directa, en estas lineas podremos apuntar al padre de un hijo.<\/p>\n
 <\/p>\n
ul li:hover &lt; ul { \/* Trying to target parent. This doesn't work *\/\r\n\u00a0}<\/pre>\n
Ahora con CSS4 se podra hacer asi:<\/p>\n
ul! li:hover { \r\n}<\/pre>\n
Ahora el padre esta seleccionado cuando una li dentro est\u00e1 en estado hover. la oportunidad de agregar lo que CSS puede hacer es incre\u00edble y definitivamente uno de los mejores pensamientos para los elementos CSS. Notar que otras especificaciones mencionando apuntar a los padres como $E > F en vez de un signo de exclamaci\u00f3n.<\/p>\n
 <\/p>\n
conclusiones personales y recomendaciones.<\/h1>\n
\"\"<\/a>
CSS4<\/p><\/div>\n
Definitivamente los nuevos selectores ahorraran l\u00edneas de c\u00f3digo a esos programadores web y les dar\u00e1n mas opciones al momento de crear nuevos sitios, pero esto no quiere decir que los esfuerzos de CSS3 hayan sido en vano, NO! tanto CSS3 como CSS4 son c\u00f3digo CSS cuando la versi\u00f3n CSS4 salga al publico general este traer\u00e1 nuevos SELECTORES que debemos aprender a usar, pero eso es todo! los nuevos selectores solo har\u00e1n que escribir largas hojas de estilo sea un poco mas r\u00e1pido y eficiente, los viejos selectores de CSS3 seguir\u00e1n estando ah\u00ed y es por eso que los esfuerzos invertidos aprendiendo y haciendo que todos empiecen a guiarse por los est\u00e1ndar\u00a0 no ser\u00e1n desperdiciados.<\/p>\n
En general las especificaciones a los nuevos selectores se ve muy interesante, ayuda en los proyectos largos, pero esto deber\u00e1 pasar por un proceso de adaptaci\u00f3n ya que todos los navegadores deben actualizarse hace CSS4.<\/p>\n
Otras especificaciones de CSS4 est\u00e1n en estos documentos:<\/p>\n<\/div>\n
\n