Border-radius: cuánto hemos cambiado. El ayer y hoy de las esquinas redondeadas.

Border-radius: cuánto hemos cambiado. El ayer y hoy de las esquinas redondeadas.

Por Kseso ✎ 0

imagen ilustrativa border-radius: el ayer y hoyHace mucho mucho tiempo, en un reino llamado "HaciendoWebs" había un trabajo reservado sólo a los iniciados: hacer cajas con esquinas redondeadas. Requería de amplios conocimientos y más que habilidad para lograr unos efectos mínimamente decentes.
Era necesario enlazar unas cuantas etiquetas y, casi siempre, utilizar imágenes para lograrlo.
Y si querías prescindir de alguna etiqueta siempre podías añadir una pizca de js.
La carrera consistía en ver quién padecía de menos divitis y usaba menos imágenes.

Y llegó google en 2008 y sorprendió con sus bordes redondeados 1px en puro css sin imágenes. Jugaba con nuestros ojos, pues si te fijas en la imagen de la derecha lo que hacía era "quitar" 1px en cada esquina para lograr el efecto óptico.
Pero si bien prescindía de imágenes pagaba su ausencia enrevesando el código html y cargándose toda la semántica. Me ahorro el copiar el Css necesario, basta su html para que te hagas una idea:

imagen ilustrativa border-radius: el ayer y hoy <ul> <li> <a href="/"> <b> <b> <b> Visitors </b> </b> </b> </a> </li> </ul>

Recuerda, estamos hablado del año 2008. A partir de esta idea la carrera fue otra. Reducir tanta etiqueta engrazada.
El Chico CSS fue capaz de mejorar dicha estructura reduciendo el número de <b>s a sólo 2, dejando el html así: <li><a><b><b>Option</b></b></a></li> y el css:

a { display:block; border: solid #666; border-width: 0 1px; text-decoration: none; outline:none; color: #000; background: #e4e4e4; } a b { display: block; position:relative; top: -1px; left: 0; border:solid #666; border-width:1px 0 0; font-weight:normal; } a b b { border-width:0 0 1px; top: 2px; padding:1px 6px; } a:hover, a:hover b {background:#666;color:white;}

Y en ésto llegó Román Cortés y de un golpe suprimió otra <b> mejorando la semántica del html y el css y muchos dijimos ¡O_O! ooooh! pues ademas lo hacía funional en más navegadores (incluidos ie5.5. y 6) en modo quirks y strict sin cambios. Y validaba en xhtml estricto según la W3C.

Y fueron felices y comieron perdices hasta que en el horizonte apareció un nuevo sherif, forastero, luciendo en su pecho la estrella de 3 puntas: css3 y su border-radius, y pasamos de sufrir para redondear unos píxeles a divertirnos haciendo limones o comecocos en puro css.

Y colorín colorado este cuento fue contado pero no ha acabado.

Continuará...

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap