10 Trucos CSS que puede que no conozcas (Moss Vs Celik)

Experiencia de usuario
09/9/2004
|
Daniel Torres Burriel
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

Trenton Moss nos tiene acostumbrados a una prosa fácil y comprensiva cuando se pone al mando de un artículo, ya sea para SitePoint o para Evolt. Lo que me desorienta un tanto es el título de su último artículo publicado en Evolt, Ten CSS tricks you may not know. En cualquier caso lo que aquí interesa no son las licencias literarias de Moss, sino la materia de la cual escribe, más si cabe cuando al poco tiempo, otro autor de estos fangos, Tantek Celik, se anima a puntualizar en Ten CSS tricks ? corrected and improved lo dicho por Moss. Veamos.

NOTA: en un principio había traducido el título como 10 trucos CSS que no no deberías conocer (Moss Vs Celik), lo cual es un error de bulto, corregido por mi proofing tool de la guarda ;-).

Digamos que Moss pretende mostrar en un listado de 10 puntos, sendos trucos CSS que nos van a permitir optimizar nuestro trabajo con esta técnica o también aprender y/o comprender mejor las interioridades del comportamiento de los elementos de la especificación.

En ese orde de cosas veamos los puntos que trata Moss en su artículo y cómo los resuelve.

  • CSS font shorthand rule. Que viene a ser algo así como la regla de la abreviatura para definir atributos del tipo de letra, en la que nos explica cómo se aplican los valores por defecto en el caso de que no demos valor a algunos de los atributos relacionados con el tipo de letra. Por su parte, Celik contesta a este punto que el uso de las abreviaturas, atajos, o shorthandS se debería usar de forma generalizada, y nos explicita para qué elementos lo podemos usar: font, background, margin, padding, border, border-with, border-style, border-color, list-style, outline.
  • Dos clases a la vez. Moss nos cuenta cómo es posible aplicar a un objeto más de una clase de forma simultánea, aplicándolas una seguida de la otra, sin comas; tan sólo con un espacio en blando entre las dos. Celik parece que tiene algo que objetar a esta sentencia, aludiendo a un argumento de Bryan Loeper en un comentario publicado en Evolt. Dos líneas más tarde, Celik se desmarca de lo dicho por Bryan Loeper, con lo que volvemos al punto de partida acerca de la conveniencia del uso de esta potencialidad de aplicar dos clases a la vez.
  • Valor por defecto de ‘border’. Moss nos descubre, nuevo, la posibilidad de usar los valores por defecto de la propiedad, pues si éstos coinciden con nuestro objetivo podemos evitar su descripción, con el ahorro de tiempo y espacio -supongo- que eso conlleva. En cualquier caso no está de más conocer que el valor que no podemos omitir al describir un border es style. El valor por defecto de with es medium, y el de color es el del color del texto. Por su parte, Celik se limita a sentenciar que se podría haber dicho lo mismo del resto de atributos nombrados respecto del uso de los shorthands.
  • !important es ignorado por IE. Llegamos a unos de los puntos calientes del combate. Según Moss, en CSS, cualquier regla expresada en último lugar es la que adquiere preferencia. Sin embargo, el uso de !important después de una regla, hace que ésta tome la preferencia independientemente de las que escribamos después. Moss explica que esto es así para todos los navegadores, ecepto para Internet Explorer. Es el punto donde Celik salta y decide escribir, motivado por esto, un artículo en el que puntualiza todos y cada uno de los puntos expresados por Moss. Celik dice que !important sí está soportado por Internet Explorer, y nos remite a una página de validación de esta propiedad del W3C, donde yo mismo he comprobado que, efectivamente, lo que dice esa página sucede en Internet Explorer. Sin embargo, Celik continúa su argumentario. Sostiene que en el ejmplo de Moss para ilustrar la ineficacia de IE respecto de !important reside en su ejemplo: margin-top: 3.5em !important; margin-top: 2em. Lo que sucede es que esto es así para las versiones de Internet Explorer sobre Windows, no así para IE5/Mac. Desde un punto de vista excrupuloso y rigurosamente ortodoxo, Celik tiene razón cuando habla de que si se dice que !important no está soportado por Internet Explorer, así a secas y generalizando, se trata de una generalización que acarrea incorrecciones. Pero la realidad de las cosas es que, respecto de agentes de usuario, la combinación IE/Mac no es,ni de lejos, la más extendida. Y aún diría más: no es tan extendida como para diluir la sentencia de Moss.
  • Técnica de reemplazo de imagen. Moss nos cuenta un modo para no perder la estructura semántica de un documento cuando queremos otorgar la significación de, por ejemplo, un encabezado H1 si éste corresponde a una imagen y queremos que no se pierda tal significación semántica, o simplemente queremos aprovechar la existencia de este H1 de cara a un mejor posicionamiento de nuestro documento en los buscadores. Una inteligente combinación de CSS y HTML nos permitirá llevar a cabo esta solución. Por su parte, Celik, se muestra escéptico por lo que considera reduccionismo de Moss al describir tan someramente lo que para Celik es un asunto -el del reemplazo de imágenes- mucho más complejo de como lo pinta Moss. Ante lo que denomina ‘simplificación’ por parte de Moss respecto de esta técnica, Celik sugiere que se use con mucho cuidado y hagamos un trabajo previo de documentación al respecto.
  • Uso del box model hack. Aquí parece que Moss haya adivinado que Celik le va a poner peros al artículo, y tira un dardo directo al box model hack de Celik. Simplemente sugiere los beneficios de no usar esta técnica en aras de la limpieza de la hoja de estilo, adoptando una pequeña redundancia de DIVs que permita el mismo ancho para esas ‘cajas’ en todos los navegadores. Celik se defiende de esto con un argumento que para mi es un tanto débil, como es que es mejor usar hacks en la hoja de estilo que en el documento de marcas (HTML). No niega lo que dice Moss, con lo que quizá le esté dando, sin querer, la razón.
  • Alineación central de un elemento de bloque. Moss nos da las claves para centrar el contenido de un layout que pretendamos de ancho fijo. El código conocido es sencillo de aplicar, pero las generaciones de navegadores conocidas como pre IE6 no hacen caso de estas indicaciones, por lo que Moss nos da un código que todos acaten. simple, sencillo y muy bonito en muchas ocasiones. Se trata de centrar los contenidos en el nivel del BODY y aplicar los márgenes en el nivel de la clase que a tal efecto construyamos, alineando en ésta los contenidos a la izquierda.

    body
    {
    text-align: center;
    }
    #content
    {
    text-align: left;
    width: 700px;
    margin: 0 auto;
    }
    La única pega que pone Celik a este punto es que según la recopilación de navegadores que dice tener, algunos de ellos presentan problemas cuando la descripción de los atributos de margin se hacen en modo shorthand, por lo que propone que se haga en modo longhand.
  • Alineación vertical con CSS. Si comparamos lo fácil que era alinear verticalmente con tablas un contenido en una celda con lo que cuesta hacerlo con CSS, la ventaja es de las tablas. Y digo yo, que eso era hasta hace un minuto. Porque la solución que nos propone Moss es sencilla y con resultados perfectos. Se trata de dar el mismo valor al height del contenedor que al line-heigth, con lo que el contenido flotará en el medio del contenedor. La única pega que pone Celik viene determinada por la posibilidad de que las medidas y proporciones naturales de cada tipo de letra puedan hacer variar la perfecta alineación, momento en el cual debería aplicarse un valor a vertical-align hasta lograr el efecto deseado.
  • Posicionamiento dentro de un contenedor. Moss nos loa las maravillas del uso de CSS para psicionar elementos dentro de un documento, pero lo extiende al posicionamiento dentro de un contenedor, añadiendo position:relative; a dicho contenedor. De ese modo cualquier elemento que haya dentro del contenedor, será posicionado en función de los valores dados con respecto a éste. Celik también lo considera una buena técnica, si bien añade, por complementar, que position:relative está menos y peor soportado que la propiedad margin, por lo que recomienda usarla siempre que sea posible en detrimento de la otra.
  • Color de fondo hasta el final de la pantalla. Uno de los problemas que se nos plantean cuando llevamos a cabo un layout en el que queremos que un color de fondo se adopte para toda una columna, es que cuando el contenido de ésta finaliza, el color de fondo también queda truncado. Se sobreentiende que ese color de fondo lo hemos definido con CSS a través de, por ejemplo, background: blue; width: 150px;. Pues bien, la única solución que plantea Moss para solucionar esto y que el color de fondo llegua hasta el final de la pantalla, es montar una imagen de fondo aplicada al BODY de este estilo: background: url(blue-image.gif) 0 0 repeat-y;. Hemos de entender que esa imagen tiene el ancho y el color que deseamos. A este punto, Celik no aporta ni pegas ni complementos. Es decir, le parece bien al 100%. Menos mal.

En Torresburriel Estudio desarrollamos las capacidades técnicas de tu equipo en temas de usabilidad, experiencia de usuario y diseño de producto a través de nuestros cursos online y presencialesContacta con nosotros y cuéntanos tus necesidades.

¿Quieres darnos tu impresión sobre este post?

6 respuestas a “10 Trucos CSS que puede que no conozcas (Moss Vs Celik)”

  1. Daniel, escribir tan temprano no te sienta bien, revisa esa ortografía («Zelik se desmarca», «Moss nos loa las…», «Meno mal», etc.) y déjala como nos tienes acostumbrados.

    Un saludo

  2. Gracias por el resumen. Yo hubiera traducido el título cómo ’10 Trucos que CSS que puede que no conozcas’. Me suena más natural en castellano. Y en el texto te sigues refiriendo a Tantek como Zelik en vez de Celik. Perdona el ser tan tikismikis y gracias de nuevo 🙂

  3. Bueno, pues creo que las erratas ya están solventadas. Lo de «Moss nos loa las…» es correcto. Loar: (Del lat. laudāre). 1. tr. alabar. 2. tr. ant. Dar por bueno algo.

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.