Today I Learned

TIL #1 -- CSS

On peut utiliser des "features queries" pour appliquer des styles en fonction des fonctionnalités supportées par les navigateurs

@supports (display: grid) {
  /* les styles ici ne s'appliqueront qu'aux navigateurs supportant CSS Grid */
  .my-selector { background: pink; }
}

cf. https://developer.mozilla.org/fr/docs/Web/CSS/@supports

TIL #2 -- CSS

On peut préserver les sauts de ligne invisible du code source (merci Emmanuel Brendel pour celui là)

element {
  white-space: pre-wrap;
}

cf. https://developer.mozilla.org/fr/docs/Web/CSS/white-space

TIL #3 -- NPM

Pour que tout le monde utilise la même version de NPM sur un projet, d'abord encourager tout le monde à utiliser NVM et à la toute 1ère utilisation, taper cette commande pour installer la dernière version (LTS) de node et créer un fichier .nvmrc qui indiquera aux autres utilisateurs du projet quelle version utiliser :

nvm install --lts && node -v > .nvmrc

Pour utiliser la version définie dans le fichier .nvmrc il suffit de taper la commande nvm use

TIL #4 -- PHP

La méthode isset peut prendre plusieurs variables en argument

if (!isset($list['user'], $list['user']['id']) {
  throw new Exception('...');
}

Crédit : https://twitter.com/frjimmyklein/status/1272494372202975233

TIL #5 -- PHP

L'opérateur Null coalescent (??) a été ajouté en PHP 7.0 : il retourne le premier opérande s'il existe et n'a pas une valeur NULL et retourne le second opérande sinon.

// Récupére la valeur de $_GET['utilisateur'] retourne 'aucun' s'il n'existe pas.
$identifiant = $_GET['utilisateur'] ?? 'aucun';
// Ceci est équivalent à :
$identifiant = isset($_GET['utilisateur']) ? $_GET['utilisateur'] : 'aucun';
// L'opérateur permet de faire du chaînage : Ceci va retourner la première valeur définie 
// respectivement dans $_GET['utilisateur'], $_POST['utilisateur'] et 'aucun'.
$identifiant = $_GET['utilisateur'] ?? $_POST['utilisateur'] ?? 'aucun';

Source : https://www.php.net/manual/fr/migration70.new-features.php

TIL #6 -- CSS

En mettant un délai négatif l'animation commencera immédiatement avec l'état qu'elle aurait « normalement » eue au bout de ce délai.

element {
  animation-delay: -2s;
}

cf. https://developer.mozilla.org/fr/docs/Web/CSS/animation-delay

TIL #7 -- CSS

On peut utiliser l'opérateur i pour que le sélecteur soit insensible à la casse

/* Insensible à la casse */
a[title="Home" i] {
  /* marche pour home ou encore HOME */
}
/* Sensible à la casse */
a[title="Home"] {
  /* marche uniquement pour Home */
}

Crédit : https://twitter.com/umaar/status/1275416501688942592

TIL #8 -- jQuery

Il est possible d'attacher des événements à des éléments du DOM qui n'existent pas au moment de l'exécution du script. Grâce à la fonction .on(), jQuery va surveiller un élément conteneur jusqu'à ce qu'il y trouve un élément qui corresponde au sélecteur du second paramètre pour lui attacher l'événement. (merci Nicolas Bédé pour celui là)

$('body').on('click', '.random-generated-element', function() {
  console.log('I was not here at page load but jQuery found me later and now click on me is handled');
});

cf. https://api.jquery.com/on/

TIL #9 -- CSS

On peut appliquer un ombrage au contenu d'une image grâce à CSS filter et non pas juste au cadre comme avec box-shadow

.my-img {
  filter: drop-shadow(1px 2px 3px black);
}

Crédit & démo : https://twitter.com/JoshWComeau/status/1288830824322924544

TIL #10 -- CSS

En ajoutant un i le sélecteur d'attribut devient insensible à la casse.

div[data-visible="false" i] {
  display: none;
}

Ce code masquera toutes les balises <div> qui auront un attribut data-visible avec la valeur False, false ou FALSE.

Crédit : https://twitter.com/hi__mayank/status/1581804538205704193

__________________

PS : Cette idée d'article pour partager mes découvertes quotidiennes (= TIL = Today I Learned) me vient de ce site matuzo.at/til