De forma breve, los consejos que apuntan son:

• Minimizar el uso de los tag <div>
• Usar únicamente el tag  <div> para dar forma a la web: cabecera, barra lateral, contenido y pie de página (header, content, sidebar, and footer)
• El contenido de la web tiene que usar tags HTML semánticos (h1,h2,…p,…, strong,…), no hay que usar <div> para todo
• Hay que formatear (indentar) el código y añadir un comentario cuando se cierran los </div>

El post se lee bastante rápido, así que podeis echarle un vistazo.

A la lista anterior yo añadiría que usar tablas simplifica el desarrollo, así que usa tablas cuando lo creas conveniente.

Estos menus han sido diseñados por Ian Main de e-lusion.com, podeis echarle un vistazo a la página de menus gratuitos, de donde podreis descargarlos.

Si no estais de acuerdo, os remito a esta página donde lo exponen muy bien: Give Up And Use Tables

Por lo general, redondear esquinas no es difícil, el problema es que en definitiva lo que se hace no deja de ser un “hack”, no es lo mismo poder redondear una esquina usando 1 único div, especificando una serie de atributos (como se puede hacer con CSS3), que usando 3 divs, o incluso poner una tabla y usar imágenes de fondo.

En este sentido, la pena, como siempre, es que la mayor parte del mercado sigue estando dominada por Internet Explorer, por lo que en la práctica no es correcto redondear las esquinas como expuse en el artículo anterior.

Una vez dicho esto, y sabiendo que esta es la situación actual, para que las esquinas redondeadas puedan ser visualizadas por todas las personas, sin importar su raza, religión, navegador o sistema operativo, creo que habrá que seguir haciendo uso intensivo de javascript. Por suerte, desde hace ya unos años hay librerías que nos facilitan el tema de una forma brutal:

• Nifty Corners, y su predecesor, Nifty Corners Cube: fue la primera solución y muy aclamada en su momento
• jQuery corner plugin, creado por Dave Methvin: aquí podeis ver una demo con todas las opciones, y que luego fue actualizada por Mike Alsup que incluyó bastantes más tipos de esquinas (merece la pena echarle un vistazo a la demo).
• JRC es otro plugin para jQuery: en este enlace podeis ver una demo
• MochiKit ya viene con soporte nativo para rounded corners, como se puede ver en este ejemplo (aunque no es tan extenso como el plugin de jQuery).
• OpenRico también tiene soporte para esquinas redondeadas

Finalmente, si alquien quiere que sus esquinas estén redondedas, y no tiene intención de usar javascript, bien porque busca algo más sofisticado, bien porque no le gusta usar javascript, que le eche un vistazo a este artículo sobre 25 técnicas CSS para realizar esquilas redondeadas.

Actualización: en la práctica me he encontrado con ShadedBorders que me ha gustado bastante bastante más.

Según la especificación, debería bastar con definir “border-radius” a los pixeles deseados, lamentablemente los navegadores aún no soportan los atributos estándar

En cualquier caso, se pueden conseguir bordes redondeados tanto para mozilla, como para webkit, pero hay que usar “-moz-border-radius” para el primero, y “-webkit-border-radius” para el segundo.

Después de hacer algunas pruebas, he visto que tanto Firefox 2, como Firefox 3, Safari 3.1 y Chrome lo soportan, mientras que tanto  Opera, como Internet Explorer (tanto IE6 como IE7) aún están rezagados (lo de Opera no me lo esperaba… aiss).

Este texto deberías verlo con los bordes redondeados tanto en FF como en Safari.
Si te fijas, no hay javascript, sólo he usado:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Lo que fastidia es que no se pueda hacer fácil con IE. ¿Que os parece el tema de las esquinas redondedas?
]]> http://www.codigomanso.com/es/2008/12/rounded-corners-en-css3/feed/ 11 http://www.codigomanso.com/es/2008/11/combinando-clases-css/ http://www.codigomanso.com/es/2008/11/combinando-clases-css/#comments Fri, 14 Nov 2008 14:36:49 +0000 Pau Sanchez http://www.codigomanso.com/?p=85 A decir verdad, llevo ya bastante tiempo trabajando con tecnologias web (veanse PHP, HTML, JS, CSS, etc…) y hoy he descubierto algo nuevo.

Es una chorrada, lo reconozco, pero no me habia parado a pensarlo tampoco.

Si habeis hecho alguna cosa con CSS sabeis que están los tags, los identificadores y las clases, a la hora de definir un estilo. También sabreis que todos ellos pueden combinarse, y que luego cada navegador interpreta a su manera los estilos, y a veces es un infierno.

Esto no va sobre el infierno del CSS en los distintos navegadores, sino sobre como según se declaren las clases, se puede conseguir que cuando dos clases coinciden en el mismo bloque, ambas produzcan un nuevo resultado.

Vale, es una chorrada. Yo llegaba hasta lo de combinar tags y clases o ids y clases, pero no habia caido en la cuenta de que dos clases también se pueden combinar

Para el que no sepa de que estoy hablando, o quiera entender lo que digo, aquí va un ejemplo:

<style type="text/css">
<b>.a1, .a2</b> { color: red; }
<b>.b</b> { border: 1px solid black; }
<b>.a1 .b</b> { background: #ccf; }
<b>.a2.b</b>  { background: #ccf; }
</style>
 
<div class="a1">Bloque creado con <strong>class="a1"</strong></div>
<div class="b">Bloque creado con <strong>class="b"</strong></div>
<div class="a1 b">Bloque creado con <strong>class="a1 b"</strong></div>
<div class="a2 b">Bloque creado con <strong>class="a2 b"</strong></div>

He aquí el resultado

Y para los lectores del blog que usen RSS:

Como se puede ver, a1 y a2 han sido declaradas exactamente igual, sin embargo se declaran de forma distinta “.a1 .b” (notese el espacio) y “.a2.b” (aqui no hay espacio). Básicamente la primera declaración está diciendo como cambiar el diseño de un objeto de clase b cuyo ancestro sea a1, mientras que la segunda dice como cambiar el estilo de un objeto cuyas clases sean a la vez a2 y b.

Pues nada más, como diría carme: espero que lo hagais, y a ver si os gusta

.

Nota: Para el que después de leer esto esté pensando “ostias, es cojonudo! tampoco lo sabia”, que sepa que lo he probado con varios navegadores (IE6, IE7, FF2, FF3, Opera y Safari 3), y funciona en todos menos en…. efectivamente!! menos en IE6 (la verdad es que debo reconocer que me ha sorprendido que funcionara en IE7).