Z-index et absolute

Le concept du z-index parait simple, plus la valeur est haute, plus l’élément sera en haut de pile, mais dans le pratique, si on utilise un positionnement en absolute ça pourrait ne pas se passer comme vous l’entendez et vous pourriez y perdre quelques cheveux.


Voici un article qui vous aidera à mieux comprendre ce qui se passe:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Media Queries Breakpoints

Une liste des valeurs de rupture (breakpoint) à mettre dans vos media queries, mais veillez en priorité a respecter les valeurs de la feuille de style mère.
La page est assez bien fournie et regroupe les principaux framework css du marché.
Tout cela reste des suggestions et ça ne couvrira pas forcément tous les spécificités des appareils du marché.


https://media-queries.aliasdmc.fr/media-queries-live.php

Sticky Footer

Un footer qui se retrouve en milieu de page, ça ne se fait pas!

Un pied de page (footer) doit toujours être en bas de page, même si le contenu ne remplis pas la page. Malheureusement, bon nombre de templates négligent ce fait.
sticky footer

Dans le lien ci-dessous vous découvrirez 5 techniques vous permettant de le faire, à vous de choisir la meilleure technique suivant l’architecture de votre site.
(en ce qui me concerne, la méthode avec calc() me parait la plus commode, pour autant que vous n’ayez pas trop de contraintes concernant la rétrocompatibilité)

Voici :not() …. une pseudo-class qui s’avérera très pratique.

A l’heure d’écrire ces lignes, il est peut-être encore un peu tôt pour l’utiliser en production, le site caniuse.com indique une implémentation encore très récente (jan-sept 2021) sur les navigateurs courants. Mais le fait de pouvoir exclure divers éléments, et pas que des classes ou autre sélecteurs, sera probablement très pratique.

Le site css-tricks vous en expliquera toutes les subtilités.


Un petit tour sur ce codepen pour tester tout cela pourra également être utile.

Min, max, clamp!

Des fonctions très sympathiques pour gérer la taille de vos typo selon la taille de l’écran.

(attention tout de même, ces fonctionnalités sont assez récentes et sont uniquement prises en charge par les navigateurs récents)