Orden inverso de elementos puro Css: 4 formas 8.12.15
Cuatro formas diferentes de mostrar los elementos en pantalla en el orden inverso al que aparecen en el documento. Entre otras posibles aplicaciones está el poder simular un selector CSS de precedentes.
Orden inverso de elementos puro Css: 4 formas
Hay ocasiones en que quizás deseas mostrar una serie de elementos en orden inverso a como aparecen en el html. Esto es, que se dibuje primero el último que aparece en el DOM, segundo el penúltimo, tercero el antepenúltimo... y así sucesivamente hasta que el último mostrado sea el que primero escribiste en el HTML.
No se trata de numerarlos de forma inversa sólamente. Eso ya lo explicaba en el artículo Numeración inversa en Listas Ordenadas
.
En esta ocasión se trata de representarlos en pantalla de forma reversa a como aparecen en el código del documento.
Esto entre otras cosas, nos permitirá simular con puro CSS un selector de precedentes. Selector que hoy por hoy no tenemos.
Orden inverso con float
La primera forma es el viejo float: right
See the Pen Reverse order: float by Kseso (@Kseso) on CodePen.
Sencillo, soporte universal y de todos conocidos.
Inconvenientes
Pese a lo anterior, y por eso va la primera, tiene una serie de particularidades que desaconsejan su uso para esta finalidad.
A las particularidades inherentes a los elementos flotados hay que sumarle:
- En caso de que los elementos ocupen todo el ancho no hay inversión.
- La inversión sólo se produce línea a línea de elementos. Si el grupo conforma dos o más líneas en las que se reparten los elementos el orden es de lo más caótico: 1ª línea: 2º - 1º / 2ª línea: 4º -3º y así sucesivamente.
Añade que el centrado se vuelve mucho más complejo.
Orden inverso con direction
La segunda forma forma es usar la declaración direction: rtl en el contenedor padre y revertirla en sus ítems:
See the Pen Reverse order: direction by Kseso (@Kseso) on CodePen.
Inconvenientes
Evitamos aquello que es propio de los elementos flotados: como poder usar el valor inline-block, centrar de forma menos compleja, no necesitar limpiar el float
... pero se mantienen las inconsistencias al repartir en más de una línea los ítems.
Orden inverso con flexbox
Para lograr esta representación inversa una buena idea es usar el modelo de caja flexible o flexbox
See the Pen Reverse order: flexbox by Kseso (@Kseso) on CodePen.
ol {
display: flex;
/*flex-direction y flex-wrap */
flex-flow: row-reverse wrap-reverse;
}
Al usar la propiedad flex-flow que es la forma acortada para flex-direction y flex-wrap con esos valores nos aseguramos que el orden inverso se realiza independientemente de las líneas en las que se repartan los ítems.
Así que con el flexbox
no importa que los elementos ocupen una línea cada uno. También realiza la inversión.
La única pequeña desventaja es que no podremos animar estas propiedades.
Orden inverso con transform:
Las transformaciones css encierran muchas sorpresas. Y con un poco de imaginación en su uso los resultados son de lo más apropiados para algunos "imposibles Css" como ya pudiste ver en el artículo Reverse ellipsis multiline: mostrar las últimas líneas de texto con ellipsis al inicio
En esta ocasión aplicamos una rotación de 180º al padre (la lista) y la revertimos (o completamos la rotación) en los ítems. Esto tiene un resultado visual como el que ves en el siguiente pen:
See the Pen Reverse order: transform by Kseso (@Kseso) on CodePen.
Al admitir animaciones las transformaciones podemos jugar con ellas. Como ejemplo, haz :hover en el pen previo. Para ver la doble rotación he añadido un delay a los ítems.
La transformación también es válida, como el flebox, para elementos repartidos en múltiples líneas o de bloque.
Esta vez te voy a dejar a ti para que juegues con estás últimas formas aplicadas a las multicolumnas css. Creo que el uso conjunto de colunms y transform puede deparar gratas sorpresas.
Aprovecha que puedes insertar pens en los comentarios para compartir tus demos de tus formas de invertir el orden o de jugar con las transformaciones en las columnas.
Kseso
the obCSServer ᛯ 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 Kseso
Me ha venido de perlas para un responsive con el que estoy liado. Me he quedado con la última opción, gracias!
ResponderEliminarAndo liado tratando de hacer este pen:
ResponderEliminar[pen]data-height="416" data-theme-id="5786"
data-slug-hash="JGzJvM" data-default-tab="result"
data-user="g3kdigital" class='codepen'[/pen]
Mi idea es reproducir esta maqueta:
https://pbs.twimg.com/media/CbSKxMPXIAA9bNG.jpg:large
[img]https://pbs.twimg.com/media/CbSKxMPXIAA9bNG.jpg:large[/img]
Siguiendo la estructura html:
[code]
<section>
<a></a>
<a></a>
<a></a>
<div></div>
</section>
[/code]
Si no es mucho pedir, gracias de antemano.
Bestia de mi, no puedo insertar el pen: http://codepen.io/g3kdigital/pen/JGzJvM?editors=1100
EliminarCreo que te has cargado en este post la inserción de pens, g3kdigital
ResponderEliminarxD xD xD
Bueno, a ver si era esto lo que pretendías lograr
Y el pen, a ver si lo snifa ;-)
[pen]data-height="350" data-theme-id="299" data-slug-hash="dGrdYY" data-default-tab="result" data-user="Kseso" class='codepen'[/pen]
Ups, mi comentario se ha cargado el sistema totalmente. Mejor será desactivar temporalmente el sistema de pseudo-BBcode para poderlo leer...
EliminarGracias Jorge por estar tan al quite con la solución.
EliminarBueno, aplicado lo que comentas parece que si que funciona.
Sólo que ahora quedó un poco de aquella manera tu primer comentario ya que incluiste la palabra pen entre corchetes y ahí que hace también su trabajo.
Queda algún pequeño conflicto ya que este bendito CMS etiqueta como 1 sólo párrafo todo el contenido. Y ahí tenemos ahora a cada navegador y su interpretación de cómo corregir el encontrarse un div dentro de un p.
Veamos qué se me ocurre ;-)
Un saludo
Para quien esté interesado en el texto íntegro de Jorge en su primer comentario (el 3.1) lo puede ver (en imagen) siguiendo este enlace.
EliminarUn saludo
Ya tuve en cuenta que la regex intentaría modificar mis corchetes y cuando lo escribí los cambié por sus correspondientes "entities" para evitarlo, pero por lo visto Blogger me lo cambió.
EliminarPodemos afinar un poco más para evitar que se "parsee" lo que no debería. Por ejemplo, solo aceptamos imágenes que empiecen por el protocolo HTTP(S) y tengan un formato válido:
[code]
/\[ img\](https?:\/\/.*?\.(jpg|gif|png|bmp))\[\/img\]/g
[/code]
(quitar el espacio de [ img])
Para los pens, nos aseguramos que contenga la clase "codepen", ya sea con comillas simples o dobles:
[code]
/\[ pen](.*?class=["']codepen["'].*?)\[\/pen\]/g
[/code]
(quitar el espacio de [ pen])
Todo esto son ejemplos para ver las posibilidades de las expresiones regulares, adáptalo como necesites.
Hay otro error: el corchete de cierre ] sirve para agrupar caracteres en la expresión regular, por lo que hay que escaparlo si se quiere usar literalmente.
EliminarEl último código que he escrito debería ser así:
[code]
/\[ pen\](.*?class=["']codepen["'].*?)\[\/pen\]/g
[/code]
Estuve echando un vistazo con más detenimiento al porqué el pen insertado por g3kdigital en el comentario 2 no sólo no se muestra si no que rompe todo lo demás.
EliminarCreo que todo está en que insertó el código con saltos de línea que el sistema de comentarios de Blogger lo traduce y convierte en el elemento html <br>
Y al encontrarse con este elemento dentro de la etiqueta de apertura del párrafo causa el destrozo.
Así que me pregunto, Jorge, si sería posible poder excluir los <br> en el valor $1 entregado por la expresión regular en el .replace()
Oppss! Puesto así parece que te estuviese mandando deberes para casa xD
Un saludo
He estado probando sin éxito varias combinaciones de expresiones regulares. No he conseguido capturar solo la parte del pen sin incluir los <br> ya que los saltos pueden repetirse indefinidamente y la regex solo captura la última repetición.
EliminarAsí que uso 2 regexes: la primera captura todos los [ pen][/pen] que tengan saltos y su contenido. Esto se guarda en un array así que, mediante un bucle, recorro los resultados. Disponiendo del contenido del [ pen] en una variable, es cuestión de coger el HTML completo y reemplazar el contenido original del pen por el mismo contenido sin los <br> con otra regex.
En código:
[code]
// en la variable "html" tenemos el contenido del elemento (elemt.innerHTML)
var coincidencias, regexPens=/\[pen\].*?(
.*?)+\[\/pen\]/g;
while ((coincidencias=regexPens.exec(html)) !== null) {
html=html.replace(coincidencias[0], coincidencias[0].replace(/
/g,""));
}
[/code]
Ahora ya tenemos en la variable "html" los [ pen] sin saltos <br> y podemos reemplazarlos por el pen propiamente dicho de la forma que indiqué anteriormente.
Este comentario ha sido eliminado por el autor.
EliminarVuelvo a publicar el código completo porque Blogger me ha añadido saltos de línea indeseados:
Eliminar[code]
// en la variable "html" tenemos el contenido del elemento (elemt.innerHTML)
var coincidencias, regexPens=/\[pen\].*?(<br \/>.*?)+\[\/pen\]/g;
while ((coincidencias=regexPens.exec(html)) !== null) {
html=html.replace(coincidencias[0], coincidencias[0].replace(/<br \/>/g,""));
}
[/code]
Hola Jorge MG.
Eliminar¿Habrá manera de meter un 'split().join()' a la cadena? Es otra forma de limpiar texto de una.
Encontré esta herramienta online para probar las regex que estoy seguro que ya conocen.
EliminarLo máximo que conseguí eliminando los <br> fue mostrar o bien lo que está antes del salto de línea o lo que está después.
Creo que en cuanto tenga un rato intentaré jugar y montar un pequeño Frankestein con removeHtmlTag dentro del pen antes de de aplicar la regex y las sustitución.
Casi que estoy seguro que es otra "idea de bombero made in Kseso", pero por intentarlo...
Bueno, eso o cualquier otra idea loca xD
Por cierto, no os quejaréis de que no os entretenga ¿eh? =P
Kseso, trasteando con expresiones regulares me pasó algo similar a lo que dices. Teniendo en cuenta que el salto de línea puede aparecer un número indeterminado de veces, o no aparecer, no conseguí hacer una regex útil para el caso. Probando con un texto con varios saltos de línea, solo conseguí capturar el texto anterior al primer salto y el posterior al último, así que desistí de probar una única regex que lo reemplazara todo.
EliminarFuroya, ya estuve probando con html.split("<br />").join("") pero así eliminamos los saltos de línea de todos los comentarios y solo nos interesa eliminarlos dentro de [ pen][/pen] (por eso también descarté usar la función removeHtmlTag que sugiere Kseso).
De todas formas, se puede aplicar en el código que he publicado:
[code]
coincidencias[0].replace(/<br \/>/g,"")
coincidencias[0].split("<br />").join("")
// resultado idéntico
[/code]
Además, sabiendo que el contenido de [ pen][/pen] se va a introducir como atributos de un párrafo, no solo habría que eliminar los saltos de línea, sino también cualquier etiqueta HTML que pudiera entrar en conflicto (hay multitud de regexes para ello en internet).
jojojo!
EliminarVeo que os estáis tomando el reto demasiado a pecho.
Por mi podéis dejadlo. Total, con eliminar el comentario que lo rompa xD xD
Como curiosidad, hace un tiempo estuve montando un pequeño script para que quien quisiese publicar código sin preocuparse de los <
Pegaba el código daba a convertir y lo pasaba al textarea del comentario.
Me daba besitos de lo bien que funcionaba en local... hasta que lo quise implementar en Blogger y caí en la cuenta de que el textarea de los comentarios lo inserta en un iframe
:palm: :palm: y :palm:
Sólo para que no vayáis por la vía de arreglarlo antes de guardarlo ;-)
Un saludo
Y después decimos que el "enredique" soy yo.
EliminarHasta que no le calentáis la cabeza a uno y lo hacéis poner no quedáis a gusto.
xD xD =P
A ver qué os parece este engendro ;-)
[pen] data-height="430" data-theme-id="299" data-slug-hash="vLwyRG" data-default-tab="result" data-user="Kseso" class='codepen'[/pen]
Ahora con calma y si me dais el visto bueno veré como integro el formulario de conversión en el blog.
wow! y upss, la que lié con mi comentario...
ResponderEliminarHabrá que hacer como que no ha pasado nada, ya que la ayuda no era para ti sino para un tercero, g3kdigital
Eliminar;-)
Que por cierto, ni las gracias te ha dado.
xD
ah! Y ya que estamos, dale recuerdos a la "agh!ministra" de esa comunidad.
Que no. Que es broma.
Un saludo