Flex y position absolute compatibles ?

Mi experiencia de cierta incompatibilidad entre flex y la position absolute surgió al querer centrar verticalmente el contenido (título, headline y botón) del primer fold de un website. Les explico como superar esa “incompatibilidad”.

Lo que buscaba hacer es un diseño fluido, que permita guardar el contenido centrado, aún cuando la pantalla está disminuida en su altura.
Mira el ejemplo siguiente para entender mis palabras:

Así el texto sigue visible, en lugar de desaparecer por tener una posición especificada con referencia base aplicada desde el top o bottom del contenedor.

Las primeras líneas de css que escribí se aplicó de manera fantástica en Chrome; en Chrome únicamente. Después de leer unas documentaciones, entendí que efectivamente hay dos cosas que tomar en cuenta:

align-self no se aplica si está combinado con margin : auto

selector {
align-self: center; 
margin: auto;
}

la position absolute y las características flex son compatibles en todo los navegadores únicamente cuando flex y absolute:

  • se aplican a un mismo elemento
  • ese elemento es el contenedor padre directo de los elementos que vamos a alinear.
contenedor-padre-lejano {
 height: 100%;
}
contenedor-padre-directo {
 position: absolute;
 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
 display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
 display: -ms-flexbox; /* TWEENER - IE 10 */ 
 display: -ms-flex; /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
 display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+, Chrome, Opera */
 align-items: center;
 height: 100%;
 top: 0;
 flex-direction: column;
}
elemento-a-centrar {
}

Si atribuimos el display flex a un padre lejano, el efecto se aplicará unicamente en Chrome.

En cuanto a la compatibilidad con previas versiones de navegadores:

la compatibilidad de flex con varias versiones de navegadores

 

Tabs en publicación de wordpress sin plugin

Ok, el proyecto: un onepage website responsivo con espacio de membresia para un espacio co-working llamado hasta la hora Vorticer (MX), desarrollada en WordPress.

Cuando desarrollo páginas en wordpress, procuro usar el mínimo, por no decir ningún, plugin. Eso para no obligar el cliente en actualizarlos cada cuanto, cosa que de cualquier manera no hará, y entonces evitar que conflictos entre la versión de wordpress y la versión del plugin surjan además que eventuales problemas de visualización de la información lleguen en los meses siguiendo la entrega del proyecto.

Uno de mis objetivos cuando trabajo en proyectos digitales es entregar un producto en simbiosis con el business del cliente, con una organización de contenido adecuado para el usuario y que vaya de mano con los objetivos que tiene el cliente (su empresa / servicio / producto es ya conocido, o es desconocido, está mejorando algo, lanzando algo nuevo,…), que sea funcional, agradable a la vista, con una identidad propia, y en el cual el contenido tiene el primer papel. Eso sin hablar de la rapidez de cargamento, y del SEO.

Para contestar a todas esas exigencias, decidí recurrir a las tabs para enseñar varias opciones de membresía disponibles en el Vorticer co-working. Solución idea para una uno page, además porque nada más hay 3 membresias, un número ideal para las tabs.

En fin, el desafío que me tomó 2 días en resolver, pero que guardaré de por vida en esta publicación, era de implementar eso sin instalar uno de las decenas de plugin que existen para ello. Mi solución es puro php y jQuery (UI).

Lo que me costo más trabajo ha sido aplicar el incremento de +1 a cada nuevo div panel del tab, aquí:
<div class=“tab-pane fade<?php if ( $get_featured_pages->current_post == 0 ): ?> in active<?php endif; ?>” id=“tabs-<?php echo $panel_id; ?>”>
sin que se incrementará el numero de excerpt de +1 (el problema que he tenido era que si el id era 2,  entonces el excerpt se visualizaba 2 veces,…) Eso porque ponía el incremento dentro del loop en vez de ponerlo al final como aquí:
<?php $panel_id++;
endwhile;

Les planteo la solución PHP aquí (todavía no integre el jQuery, tampoco el CSS)

 

El código PHP:

<?php if( !empty ( $page_array ) ) :
$count = 0; ?>
<div class=“team-content-wrapper clearfix”>
<div class=“tg-column-wrapper clearfix”>
<div id=“tabs”>

<!–La navegación tabs –>
<ul>
<?php while( $get_featured_pages->have_posts() ):$get_featured_pages->the_post();

if ( $count % 3 == 0 && $count > 1 ) { ?> <div class=“clearfix”></div> <?php }

$title_attribute = the_title_attribute( ‘echo=0’ ); ?>

<li>
<?php
$output = “;
$himalayas_designation = get_post_meta( $post->ID, ‘himalayas_designation’, true );
?>

<?php
$output .= ’<a class=”team-name team-desc-wrapper” href=“#tabs-’ . $count . ’” title=“’ . $title_attribute . ’” alt =“’ . $title_attribute . ’”>’ . get_the_title() . ’</a></li>’ ;

echo $output;
$count++; ?>
<?php endwhile;

// Reset Post Data
wp_reset_query(); ?>
</ul>

<!– Los paneles de la navegación tab –>

<?php
$panel_id = 1;

while( $get_featured_pages->have_posts() ):$get_featured_pages->the_post(); ?>

<div class=“tab-pane fade<?php if ( $get_featured_pages->current_post == 0 ): ?> in active<?php endif; ?>” id=“tabs-<?php echo $panel_id; ?>”>
<div class=“col-xs-4 col-sm-2”>
<?php
$output = “;
$himalayas_designation = get_post_meta( $post->ID, ‘himalayas_designation’, true );

$output .= ’<p>’ . get_the_excerpt() . ’</p>’;
echo $output;
?>
</div>
</div>

<?php $panel_id++;
endwhile;
wp_reset_postdata();

// Reset Post Data
wp_reset_query();
?>

</div><!– #tab container –>
</div><!– .tg-column-wrapper –>
</div><!– .team-content-wrapper –>

<?php endif; ?>

You are welcome!