Y es que, en cuanto a CSS3 se refiere, sigue habiendo diferencias abismales. Por ejmplo: IE sigue sin enterarse de lo que pasa (es decir: para el explorador de Gates el CSS3 como si no existiera). En cuanto a bordes redondeados conjuntados con sombras, casi no se percata un solo navegador, a excepción de Safari, pero... hay algunas cosillas que van bien para casi todos los navegadores (y en el "casi", siempre se incluye IE). Por ejemplo:
Teniendo en cuenta los conflictos que a veces nos crea query en la plantilla, no viene nada mal tener un sustituto ligerito y nada conflictivo para crear columnas:
Había una vez, un barquito chiquitito. Había una vez, un barquito chiquitito, que no sabía, que no podía, que no sabía navegar. Pasaron un, dos, tres, cuatro, cinco, seis semanas. Pasaron un, dos, tres, cuatro, cinco, seis semanas. Y aquél barquito, y aquél barquito, y aquél barquito navegó. Y si esta historia parece corta, volveremos, volveremos a empezar: Había una ve un barquito chiquitito...
Y lo obtenemos mediante estos parámetros CSS3:
<div style="border: 5px solid #151515; padding: 15px 25px; height: inherit; width: 350px;">
<p style="text-align: justify; -moz-column-count: 3; -moz-column-gap: 1.5em;-moz-column-rule: 1px solid #dedede; -webkit-column-count: 3; -webkit-column-gap: 1.5em; -webkit-column-rule: 1px solid #dedede;">Había una vez, un barquito chiquitito. Había una vez, un barquito chiquitito, que no sabía, que no podía, que no sabía navegar. Pasaron un, dos, tres, cuatro, cinco, seis semanas. Pasaron un, dos, tres, cuatro, cinco, seis semanas. Y aquél barquito, y aquél barquito, y aquél barquito navegó. Y si esta historia parece corta, volveremos, volveremos a empezar: Había una ve un barquito chiquitito... </p></div>
Y ahora, queremos unos bordes redondeados:
Esta caja tiene 5 píxeles de borde "normal y 15 píxeles de "border radius".
Que podemos obtener así:
<div style="border: 5px solid rgb(222, 222, 222); padding: 15px 25px; font-family: Arial; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; height: inherit; width: 350px;">
<p><strong>Esta caja tiene 5 píxeles de borde "normal y 15 píxeles de "border radius".</strong></p></div>
Quizás un día nos veamos libres de tener que usar javascript para conseguir estas cosas y que desde cualquier navegador se puedan apreciar...
De momento, más cosillas (que nos ponen los sientes largos a quienes no usamos Safari) en
✍ ¿Quieres hacer algún comentario? ✍