Astuce css: avoir une DIV qui occupe 100% du viewport

Grâce à CSS3, c'est super simple, il suffit d'utiliser l'unité vh: 100vh = la hauteur du viewport (la zone visible de l'écran)

Du coup, on peut même avoir une barre de menu et d'icônes puis en-dessous une div qui occupe tout le reste du viewport en recourant à calc():

#mon_wrapper{
     height: calc(100vh - 64px); /* 64px = la hauteur du menu+ celle de la barre d'icônes */
}

C'est juste... Beau.

Lire la suite de Astuce css: avoir une DIV qui occupe 100% du viewport

6 Balises HTML5 intéressantes

Je me suis aperçu récemment de l'existence de la balise details et je me suis dit que je pourrais me noter celles qui me feraient de l'usage dans un éventuel avenir.

<details>

L'élément HTML details sert à créer une ligne de résumé permettant de révéler plus d'informations sur un clic.

L'attribut [open] permet de styler l'ensemble lorsqu'il est ouvert.


<style>
    details{font-style:italic;cursor:pointer}
    details:after summary{content:"▶"}
    details[open]:after summary{content:"▼"}
    details p{margin-left: 25px}
</style>
<details>
  <summary>Ligne de résumé.</summary>
  <p>Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...</p>
</details>
Ligne de résumé.

Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...

en savoir plus - compatibilité 92% et pas sur edge

<dialog>

Crée une boîte de dialogue dans laquelle on peut mettre ce que l'on veut. L'attribut open contrôle l'ouverture et la fermeture

en savoir plus - compatibilité 75%, c'est peu...

<data>

La balise data permet d'ajouter une valeur interprétable par une machine à une valeur lisible par un humain: plus simplement, on peut relier le nom d'un produit à son ID dans la base de données par exemple.

<p>New Products:</p>
<ul>
    <li><data value="398">Mini Ketchup</data></li>
    <li><data value="399">Jumbo Ketchup</data></li>
    <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

en savoir plus - compatibilité 99%

<base>

Fournit l'url de base et le target pour tous les liens relatifs de la page. en savoir plus - compatibilité 98%

<meter>

Crée une jolie jauge dont on définit le remplissage afin de représenter visuellement une proportion. Elle utilise les mêmes attributs qu'input number (min, max, value) et y ajoute high, low et optimum qui définissent respectivement à partir de quel nombre la valeur est haute ou basse ainsi que la valeur considérée comme optimale.

Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas les pseudo-éléments before et after)


<meter value="2" min="0" max="10" low="2">2 out of 10</meter>
meter value="0.6">60%
2 out of 10 60%

en savoir plus - compatibilité 95%

<progress>

Comme meter, progress crée une... barre de progression. Elle utilise les attribut max et value.

Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas non plus les pseudo-éléments before et after)


<progress value="2" min="0" max="10" low="2">2 out of 10</progress>
progress value="0.6">60%
2 out of 10 60%

en savoir plus - compatibilité 98%

image

Comment Se Souvenir De Tout Pour (Quasiment) Toujours

Je commence la lecture et je tombe sur les trois trucs inefficaces pour mémoriser dans lesquels je trouve: les cours.

Les cours, c'est pas pour mémoriser mais pour découvrir ou à la rigueur réinvestir les acquis et les compléter. ça part pas super bien.

Ensuite, il semble découvrir que la relecture et le bachotage - qui consiste à apprendre par coeur - ne sont pas efficaces et qu'on oublie tant qu'on n'utilise que la mémoire temporaire... pas besoin des sciences cognitives pour savoir que si ça ne «passe pas par le cerveau» c'est inefficace; c'est pour ça qu'on répète aux élèves :

  • qu'il vaut mieux chercher à se souvenir du contenu du cours, même de façon très fragmentaire, avant même d'ouvrir un cahier pour que le cerveau recherche les infos qui lui manquent,
  • qu'on doit séparer le passage à l'écrit de la pratique à l'oral,
  • qu'il ne suffit pas de relire ou de répéter à haute voix pour que ça passe par le cerveau (on peut très bien lire quelque-chose mécaniquement et n'en rien retenir, comme quand on lit un roman en pensant à autre-chose)
  • qu'il faut oublier puis se remémorer plusieurs fois volontairement pour qu'une information devienne pérenne. Et heureusement d'ailleurs, sinon on deviendrait fou.
  • qu'il convient de réviser plusieurs fois au cours de l'année au lieu de réviser au dernier moment
  • qu'il faut que les données révisées aient du sens: on ne mémorise bien que ce que l'on comprend et ce qu'on peut mettre en relation avec les acquis déjà existants.

[TROLL] Mais peut-être n'a-t-il pas bien écouté en cours [/TROLL]

En gros, le système proposé ressemble aux flashcards en un peu plus ambitieux.

Bon, le reste de l'article est bien: il est clair, bien présenté, bien vulgarisé, hein: je ne jette pas le bébé avec l'eau du bain... Les astuces proposées me semblent bien même si elles ne conviendront pas forcément à tout le monde - comme il le dit, ce n'est pas un lifehack.

Reste à tester avec sérieux pour voir le ratio temps+énergie consacrée / résultat: en effet, ce qui pose problème aux apprenants, c'est le temps et l'énergie demandée pour réviser réellement, ce qu'on pourrait réduire à un mot: la motivation.

La propriété CSS - objectif-fit - NextuM

Je ne connaissais pas cette propriété qui permet à une image d'occuper tout ou partie de l'espace parent (un peu comme son pendant background-size)

Dans les exemples suivants, l'image a un width et un height de 100% à chaque fois.

object-fit: cover;

Couvre toute la surface quitte à perde des parties de l'image.



object-fit: contain;

Couvre toute la surface quitte à laisser des zones vides dans le parent.


object-fit: fill;

Remplit toute la surface quitte déformer l'image.

Comme d'habitude c'est pas poue IE mais OSEF.

Fil RSS des articles de ce mot clé
  • @cochise t'es con ^^ J'ai failli marcher en fait ^^