Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Diferentes métodos de CSS para cambiar el orden de visualización

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

En éste tutorial cubriremos algunos métodos CSS para reordenar elementos HTML.

El Objetivo

El maquetado que queremos elaborar es muy simple.  Específicamente, en pantallas pequeñas (es decir <600px), debería verse así:

En pantallas medianas y superiores (es decir, mayores o iguales a 600 px), queremos que aparezcan asi:

Nuestro mayor desafío es encontrar una manera de revertir el orden los los botones.

El Marcado

El marcado que estaremos usando es simple; solo un elemento div  que contiene cuatro botones:

Estilos Básicos

En pantallas pequeñas, todos los botones comparten los mismos estilos:

En pantallas grandes, solo asignamos width:25% a los botones. Los estilos restantes serán determinados por el método CSS que usemos para revertir el orden de los botones.

Finalmente, agregaremos algunos estilos para el estado focus de nuestros botones:

Asi que, si usamos el teclado (la tecla "Tab") para navegar por los botones, cada uno de los botones enfocados pasarán a tener un color rojo de fondo.

Métodos para Ordenar Columnas

En éste punto estamos listos para examinar diferentes enfoques de CSS para revertir el orden de los botones cuando la ventana gráfica supere los 599px.

Método #1: Floats

Una solución rápida es flotar los botones a la derecha. Aquí esta el CSS extra:

Aquí esta el demo incluído en Codepen:

Método #2: Posicionamiento

Una solución alternativa es posicionar los elementos, ya sea relativa o absolutamente.

Siguiendo la primera opción, flotamos los botones a la izquierda, les damos position:relative, y luego utilizamos la propiedad left para establecer su posición.

El CSS requerido se ve así:

El demo incluído en Codepen:

Siguiendo la segunda opción, pudimos también dar a nuestros botones position:absolute y luego usar la propiedad left para establecer su posición más precisamente.

Las correspondientes reglas CSS:

El demo en Codepen:

Método #3: Propiedad direction

Un enfoque menos obvio es usar la propiedad direction; algo generalmente reservado para alterar la direccion de lectura del texto. En nuestro caso, especificamos direction: rtl (derecha a izquierda) al elemento que lo contiene, instantáneamente revirtiendo el maquetado.

Nota: para éste ejemplo hacemos que nuestros cuatro elementos se comporten como elementos de una tabla para lograr el maquetado horizontal.

Puedes ver los estilos CSS necesarios abajo:

Vale la pena mencionar que si (por alguna razón) queremos cambiar la dirección del texto de los botones, podemos incluir la siguiente regla "bidireccional" en nuestra hoja de estilos:

El demo en Codepen:

Método #4: Transformaciones

Una solución prolija es flotar los botones a la izquierda y luego aplicarles transform: scaleX(-1) a ellos y a su padre. Al establecer valores negativos, los elementos transformados no son escalados. De hecho, son volteados en el eje horizontal.

Debajo se muestra el CSS requerido:

El demo incluído en Codepen:

Incluso podemos utilizar la función rotate de transformaciones para lograr el orden deseado.  Todo lo que tenemos que hacer es agregar transform: rotateY(180deg) a los botones y a su padre.

Aquí está el CSS requerido para ésta solución:

Y el demo en Codepen:

Método #5: Flexbox

Flexbox es otra forma de cambiar el orden de las columnas.  En nuestro ejemplo podemos aprovechar dos diferentes propiedades de flexbox para crear el maquetado deseado.

El primer enfoque es establecer el padre de los botones como un contenedor flex y luego añadirle el valor de la propiedad flex-direction: row-reverse.

Aquí están los estilos correspondientes:

El demo incluído en Codepen se muestra abajo:

La segunda opción de flexbox es declarar el padre de los botones como un contenedor flex y luego usar la propiedad order para determinar en que orden los botones deben aparecer.

El CSS correspondiente:

El demo en Codepen:

Método #6: Maquetado CSS Grid

Una prometedora solución para arreglar elementos es el maquetado CSS Grid.  Aún si tiene un soporte de navegadores muy limitado en el momento de escribir éste tutorial, intentémoslo. Ten en cuenta que nuestro ejemplo funcionará sólo en Chrome, que por defecto no soporta ésta característica CSS, pero podemos seguir unos cuantos pasos sencillos para habilitarla.

Sin entrar mucho en detalles, describamos las dos formas para lograr el orden deseado.

La primera opción es establecer el padre de los botones como un contenedor grid y luego usar la propiedad grid-column para determinar en que orden los botones deben aparecer. Además, nos aseguramos que todos los botones pertenezcan a la misma fila al agregarles grid-row:1.

Vean los estilos asociados abajo:

El demo incluído en Codepen:

La segunda opción de grid es similar a la segunda solución de flexbox. Establecemos el padre de los botones como un contenedor grid y luego usamos la propiedad order para determinar en que orden los botones deben aparecer.

El CSS requerido:

El demo en Codepen:

De nuevo, necesitarás habilitar las "Funciones Experimentales de Web Platform" en Chrome para ver el resultado.

Orden del DOM vs. Orden Visual

Como hemos demostrado, podemos seguir diferentes enfoques de CSS para cambiar el orden de nuestros botones. Así que, en éste punto visitemos nuevamente cada uno de los demos y usemos el teclado (click en pen y pulsar la tecla "Tab") para navegar por los botones. Te darás cuenta que incluso si el "Button 4" visualmente aparece primero, el primer botón que es enfocado es "Button 1" porque es el que aparece primero en el DOM. Lo mismo ocurrirá si probamos los demos con un lector de pantalla (hice mi prueba en NVDA).

Dada ésta desconexión entre el orden del DOM y el orden de CSS, deberíamos tener mucho cuidado con las partes de nuestras páginas que modificamos con CSS. Por ejemplo, mientras la propiedad order de flexbox es una de las formas más flexibles para reordenar elementos, la especificación señala:

"Los Autores deben utilizar order solo para el reordenamiento visual, no lógico del contenido. Las hojas de estilo que usan order para ejecutar el reordenado lógico son no convencionales."

De la misma forma, aqui está lo que la especificación dice para la propiedad order de grid:

"Al igual que en el reordenamiento de elementos flex, la propiedad order debe solamente utlizarse cuando el orden visual necesita estar fuera de sincronización con el orden de medios audibles y navegación; de otra forma debe ser reordenado el documento origen."

Nota: si pruebas la segunda solución de flexbox (con la propiedad order) en Firefox, te darás cuenta que la navegación por teclado funciona bien y el primer botón que es enfocado en pantallas medianas y superiores es "Button 4". Éste comportamiento ha sido reportado como una falla.

Conclusión

En éste tutorial, examinamos diferentes métodos CSS para reordenar elementos HTML. Claro, no todos éstos métodos son apropiados en todos los casos. Antes de decidir que método usar, deberías tomar en consideración algunas cosas:

  • Los navegadores que quieres soportar.  Por ejemplo, algunos de los enfoques anteriormente mencionados no funcionan en versiones anteriores de Internet Explorer (ej. < 10).
  • La complejidad de tu modificación.  ¿Es algo simple como la que vimos en nuestro ejemplo o algo más complejo?

Si puedes pensar en cualquier otro método para revertir el orden de los botones, asegúrate de compartirlo con nosotros en la sección de comentarios de abajo.

Sugerencias de Lectura

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.