¿Qué características CSS soporta cada Navegador Web?

Cuando diseñamos un sitio web con CSS, siempre tendremos la duda si “x” propiedad o “y” pseudo selectores son soportados en qué navegador web, e incluso, desde qué versión en cada uno de ellos. Para ayudarnos a despejar este tipo de dudas, tenemos al interesante buscador Browser Support.

[ Browser Support - Búsqueda ]

El buscador nos permite fácilmente encontrar el resultado esperado para cualquier propiedad, pseudo selector, @reglas y valores de CSS, dándonos un resultado como el que vemos a continuación.

[ Browser Support - Resultados ]

Enlace: browsersupport.net

Tip: El sitio también ofrece la lista completa de características CSS, por si no deseas realizar una búsqueda.

Vía: Web Resources Depot.

Share

Actualiza automáticamente el navegador web al hacer cambios en archivos CSS

CSSrefresh es un pequeño archivo JavaScript que podemos usar en la etapa de desarrollo de nuestros proyectos web. Su función es monitorear los archivos CSS, de tal forma que al editarlos (y guardarlos) se aplicarán los cambios en el navegador web, sin tener que refrescar manualmente la página web respectiva.

[CSS Refresh]

Enlace: CSS Refresh.

Como pueden ver, pueden incluir el script directamente …

<head>
   <link rel="stylesheet" type="text/css" href="css/site.css" />
   <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>

… o usar el bookmarklet disponible.

Share

¿Sabes cuánto CSS3 soporta tu navegador web?

¡La siempre activa y creativa Lea Verou lo hace de nuevo! Acaba de presentar un interesante test para verificar el nivel de soporte de CSS3 en navegadores web.

[¿Exactamente sabes cuánto CSS3 soporta tu navegador web?]

Enlace: CSS3 Test.

Por cierto, los resultados del test en los navegadores actuales son:

  • Chrome Canary, WebKit nightlies, Firefox Nightly: 64%
  • Chrome: 63%
  • Firefox 10: 61%
  • Safari 5.1, iOS5 Safari: 60%
  • Opera 11.60: 56%
  • Firefox 9: 58%
  • Firefox 6-8: 57%
  • Firefox 5, Opera 11.1 – 11.5: 55%
  • Safari 5.0: 54%
  • Firefox 4: 49%
  • Safari 4: 47%
  • Opera 10: 45%
  • Firefox 3.6: 44%
  • IE9: 39%

¿Sólo IE9? Así es, el test no funciona en IE8 para abajo… pero como dice la propia Lea:

The test won’t work on dinosaur browsers like IE8, but who cares measuring their CSS3 support anyway?

:-)

Share

CSS 2.1 alcanza Nivel Recommendation [W3C]

W3C CSS 2.1Si desarrollas y/o diseñas para web del lado del cliente (navegador), conocer CSS (hojas de estilo en cascada) es una obligación hoy en día, si es que deseas ser competitivo en el área.

El día de ayer, la W3C (World Wide Web Consortium) le otorgó a CSS 2.1 (Cascading Style Sheets, Level 2 Revision 1) el nivel Recommendation, 13 años después de que su predecesor CSS 2 alcanzara el mismo nivel (1998).

¿Qué significa lo anterior? Ahora el estándar oficial para las hojas de estilo es CSS 2.1.

Como recordatorio, vale la pena mencionar que la W3C maneja 4 niveles en sus estándares: Working Draft, Candidate Recommendation, Proposed Recommendation y Recommendation, siendo este último el mayor nivel, con el cual los estándares ya pueden considerarse estables y listos para usarse a nivel producción.

Dicho todo lo anterior, los invito a tomarse un par de días libres, para leer la Especificación del Estándar CSS 2.1.

Ahora bien, la pregunta del millón: ¿en cuánto tiempo CSS3 llegará al nivel Recommendation? Al menos espero aún estar en edad productiva cuando eso suceda :-)

Via The H Open.

Share

Actualización en los Gradientes Lineales CSS3

CSS es una maravilla; aunque una de las cosas que más odio es tener que ajustarme a las diferentes sintaxis de cada navegador a la hora de utilizar ciertas características de CSS3, como son los gradientes lineales. Afortunadamente, las cosas están empezando a cambiar, y todos ellos empiezan a ajustarse al estándar.

Antes que nada, aquí un ejemplo del estándar:

background: linear-gradient(top, black 0%, white 100%);

y una versión compacta:

background: linear-gradient(black, white);

en donde al ser omitidos, se asume “top” como punto de partida, así como “0%” y “100%” para los puntos de inicio en cada parada de color (color stops).

Ahora bien, veamos como es implementada esta característica en cada navegador.

Gradientes Lineales en Firefox

El navegador de Mozilla soporta los gradientes lineales desde Firefox 3.6, con la enorme ventaja que desde el inicio se ajustó a la sintaxis del estándar.

background: -moz-linear-gradient(black, white);

Gradientes Lineales en Chrome y Safari

Como saben, ambos navegadores usan el motor de renderizado Webkit, por lo que a partir de Safari 4 y Chrome 2 se introdujo el uso de gradientes lineales, pero con una sintaxis realmente horrible:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));

¡Ya no más! Ahora a partir de Safari 5.1 y Chrome 10 la sintaxis ha sido ajustada al estándar:

background: -webkit-linear-gradient(black, white);

Gradientes Lineales en Opera

¡Más vale tarde que nunca! Apenas con la reciente salida de Opera 11.10, por fin ya se pueden usar los gradientes lineales, y por supuesto que se han ajustado a la sintaxis del estándar:

background: -o-linear-gradient(black, white);

Gradientes Lineales en Internet Explorer

Por último, veamos al siempre odiado y jamás igualado IE. En el caso de IE6 e IE7, su implementación de gradientes lineales es mediante el siguiente monstruo:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');

¿Mejoró en IE8 e IE9? No, sólo la ajustaron un poco:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";

Pero parece que hay una luz al final del tunel, ya que con el recién liberado IE10 Platform Preview (cuya versión estable saldrá hasta el 2012), ya es posible usar la sintaxis siguiente:

background: -ms-linear-gradient(black, white);

Ejemplo Completo de Gradientes Lineales

Mientras los navegadores sigan usando prefijos, no tendremos otra opción que usarlos todos en nuestro código para que éste sea compatible con la mayoría de los navegadores web. Aquí el ejemplo completo de uso:

#elemento {
	background: -moz-linear-gradient(black, white); /* FF 3.6+ */
	background: -ms-linear-gradient(black, white); /* IE10 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
	background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
	background: -o-linear-gradient(black, white); /* Opera 11.10 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
	background: linear-gradient(black, white); /* El Estándar */
}

Les recomiendo leer la especificación oficial del estándar para conocer a fondo todo lo que se puede lograr con los gradientes lineales (uso de varias paradas de color, especificación de ángulos, degradados repetitivos, etc).

Via: Impressive Webs.

Share

Eric Meyer actualiza su CSS Reset para adaptarlo a HTML5

Sin duda alguna, el CSS Reset más utilizado y difundido entre los desarrolladores y diseñadores web es el creado por Eric Meyer, y no sólo por ser el primero de su tipo, si no también por ser uno de los más ligeros y simples de implementar, no por nada es utilizado por varios CSS Frameworks, como el famoso Blueprint.

Luego de casi cuatro años de no modificarlo, Eric acaba de adaptar su CSS Reset para que sea compatible con el cada día más utilizado HTML5. Aquí la nueva versión:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Según pueden leer en los comentarios embebidos en el código CSS, aún hay ciertos detalles que ajustar, por lo que, si somos estrictos, no deberíamos usarlo en proyectos a nivel producción, sólo para pruebas.

Eric ha mencionado que se apoyó en el HTML5 Doctor Reset para su adaptación, aunque si revisamos bien ambas versiones, hay diferencias relevantes.

Un detalle, si entran al sitio oficial del CSS Reset de Eric Meyer notarán que sigue la versión 1.0, pues sigue siendo la rama estable. Para usar el nuevo CSS Reset para HTML5, pueden entrar al blog de Eric, o bien, usar el código que he puesto arriba (no existe enlace oficial de descarga, por lo que hay que copiar el código y pegarlo manualmente en un archivo de texto vacío).

Y tú, ¿ya usas HTML5 en tus proyectos?

Via WebMonkey.

Share

Ultimate CSS Gradient Generator

He visto diversas herramientas online que hacen prácticamente lo mismo, pero Ultimate CSS Gradient Generator me ha llamado gratamente la atención, debido a su parecido con el generador de gradientes de Adobe Photoshop.

Ultimate CSS Gradient Generator

Ahora ya no tienes pretextos para no usar gradientes nativos con CSS3 y olvidarte definitivamente de usar imágenes con el mismo efecto como fondos de tus elementos HTML, ya que de manera visual creas el gradiente, y la herramienta genera el código compatible para los navegadores web de primer nivel (Firefox, Chrome, etc) con un gradiente simple como fallback para el odioso Internet Explorer.

Por cierto, Ultimate CSS Gradient Generator fué creado por Alex Sirota, autor de la extensión ColorZilla para Firefox, uno de mis addons favoritos en el navegador de Mozilla.

Enlace: Ultimate CSS Gradient Generator .

Via Blog Freakz.

Share

Instant Blueprint

¿Vas a empezar un proyecto web y no sabes dónde comenzar? ¿No quieres empezar de cero? Con Instant Blueprint podrás crear rápidamente el esquema inicial de tu proyecto web, con código válido HTML/XHTML y CSS, con la librería JavaScript de tu preferencia.

Siempre cuando iniciamos un nuevo proyecto web desde cero, seguimos básicamente los mismos pasos: elegir un reset y framework para CSS, elegir alguna librería JavaScript, crear el layout con (X)HTML, acomodar todo en carpetas independientes, hacer otra carpeta para imágenes, etc. Todo esto es sencillo, pero tedioso si lo hacemos con frecuencia. Ahora con Instant Blueprint podemos evitarnos esta “tortura”.

Instant Blueprint

Instant Blueprint es fácil de utilizar, basta con especificar el nombre de nuestro proyecto, el tipo de DOCTYPE que usaremos (XHTML 1.0 / HTML 4.01 Strict, Transitional, Frameset), la librería JavaScript de nuestra preferencia (jQuery, MooTools, Prototype, YUI), incluso podemos especificar si la deseamos comprimida para producción o sin comprimir para desarrollo.

El framework CSS utilizado es, obviamente, Blueprint. El CSS reset utilizado es el de Eric Meyer. Además, podemos escribir los bloques div‘s que usaremos para especificar nuestro layout básico, bloques que serán insertados tanto en el HTML como en el style.css.

Quizás la carencia más significativa de esta herramienta es el no utilizar HTML5 y CSS3 como opciones alternativas; esperemos sean tomados en cuenta en alguna futura versión de esta interesante aplicación.

Enlace: Instant Blueprint.

Instant Blueprint no es la única herramienta de su tipo, pero si es una de las que mejor usabilidad tienen.

Via Web Resources Depot.

Share

Hojas de Estilo de los Agentes de Usuario de Internet Explorer

Es conocido por todo diseñador y desarrollador web el dolor de cabeza que siempre ha sido Internet Explorer, y no sólo IE6, pues con cada nueva versión aumenta la cantidad de inconsistencias, lo cual ocasiona que tengamos que utilizar definiciones de hojas de estilo diferentes para cada versión.

Para tener una mejor idea de este mundo de inconsistencias (incluyendo el preview de IE9), Jonathan Neal se dió a la tarea de realizar una tabla recopilatoria, donde incluso podemos descargar los archivos de hojas de estilo CSS para su mejor análisis. Pueden dar click a la siguiente imagen para ir al sitio correspondiente.

Hojas de Estilo de los Agentes de Usuario de Internet Explorer

Via Web Resources Depot.

Share