24 Jan 2023

Guide de survie CSS

par | Classé dans : Programmation | 0

Ce port regroupe quelques trucs et astuces pour coder en CSS, LESS et même pour la syntaxe SASS (SCSS).

C’est un peu un aide mémoire, un livre blanc. Lorsque je fais une recherche sur un besoin particulier, je prends quelques minutes pour noter la solution ici.

Ainsi d’une part d’autres personnes peuvent en profiter, y compris moi… Car 1 an, 2 ans plus tard on ne rappelle pas toujours de tout…

Dernière mise à jour : 23/05/23

Changer la couleur du tag HTML ‘placeholder’

*::-webkit-input-placeholder { color: red; }
*:-moz-placeholder { color: red; }
*::-moz-placeholder { color: red; }
*:-ms-input-placeholder { color: red; }
*::-ms-input-placeholder { color: red; }
*::placeholder { color: red; }

Exemple de tag avec un placeholder : <input type="text" placeholder="Saisissez votre nom" name="nom"...>

Media queries de base pour le responsive

/************************************ small >=400px */
@media screen and (min-width: 25em) { ... }

/*********************************** medium >=768px */
@media screen and (min-width: 48em) { ... }

/*********************************** normal >=992px */
@media screen and (min-width: 62em) { ... }

Plus d’informations ici : https://www.alsacreations.com/article/lire/930-css3-media-queries.html.

Il faut également à minima modifier le header pour un fonctionnement correct sur smartphone

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Centrer un élément, sans utiliser margin:auto : 

.maClass {
  width:300px;
  margin-left:50%;
  left:-150px; /* width/2 */
}

Avec cette solution si vous modifiez width et left (via des média queries par exemple) l’élément restera centré.

Quelques exemples de sélecteurs CSS : 

div p   {...}          /* tous les p dans une div (quelque soit le niveau) */
div + p {...}          /* tous les p qui sont aprés une div */
div > p {...}          /* tous les p qui sont enfant direct d'une div */
.class1 .class2 {...}  /* les éléments class2 dans des éléments class1 */
.class1.class2 {...}   /* les éléments avec class1 ET class2 */

Hauteur de la fenêtre : var wh = window.innerHeight ;
Décalage (scroll) vertical : var decY = window.scrollY;
Décalage (scroll) horizontal : var decX = window.scrollX;

Entête de table (thead) fixe (sticky) 

.maTable { width: 100%; border-collapse: collapse; }

.maTable thead { position: sticky; top: 0; background-color: #f1f1f1; }

Autre méthode de centrage avec translate 

.maClass {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Cellspacing et cellpadding en CSS 

.maTable {
  border-spacing:0; /* cellspacing */
}
.maTable tr, .maTable td { padding:2px; } /* padding dans les TD et TR */

TopBar/Header fixe (sticky)

.monHeader {
  position: fixed;
  top: 0;
  left:0;
  width: 100%;
  background-color: #333;
  color: #fff;
  z-index: 9999;
}

Sélecteurs pour les input de formulaire

form {...}
form label {...} 
form input[type="text"], 
form input[type="email"], 
form textarea {...}
form input[type="submit"] {...}

Sélecteur CSS pour un input type=file : input[type=file]::file-selector-button {...

Image background qui rempli l’espace

Pour afficher une image en background et remplir tout l’espace disponible. L’image s’adapte si la page est redimensionnée.

/* Code CSS a ajouter apres background: xxxx */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;

/* autre exemple */
body {
 background-image: url(....);
 background-size: cover;
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-position: center; 
}

Vérifier la compatibilité d’un navigateur

Voici un site qui permet de vérifier si votre navigateur est compatible avec un effet et/ou une fonction CSS spécifique.

Le site c’est: caniuse.com

Par exemple pour vérifier la compatibilité avec les grid CSS : http://caniuse.com/#feat=css-grid

Ajouter une popup ‘Tooltip’ 

/* Code HTML */

<span class="tooltip">mon texte avec un tooltip
  <span class="tooltip__">Texte affiché dans la popup tooltip</span>
</span>

/* Code CSS */
/* l'affichage se fait avec une fondue grace à transition et visibility */

.tooltip { position: relative; display: inline-block; }

.tooltip .tooltip__ {
  visibility: hidden;
  width: 120px;
  background-color: #ffffff;
  color: #000;
  text-align: center;
  padding: 8px;
  border-radius: 7px;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.35s;
}

.tooltip:hover .tooltip__ { visibility: visible; opacity: 1; }

div avec affichage slideover

#myDiv { 
 position:absolute; top:-500px; left:0; width:100%;
 margin:0; transition: top 0.3s ease-in-out;
 ...
}

Ensuite en javascrit pour afficher la div par glissement : document.getElementById('myDiv').style.top = "0";

Pour masquer la div aprés 1s : setTimeout( ()=> { document.getElementById('muDiv').style.top = "-500px"; },1000);

Quelques sites pour trouver d’autres infos CSS