CategoryCSS

Astuces CSS pour développeurs front-end / intégrateurs html.

[jQuery][CSS] Etendre le fond d’un mega menu déroulant sur toute la largeur de la fenêtre du navigateur

Souvent, le fond d’un menu déroulant occupe l’espace dans la limite de l’élément .container d’une page.

La classe .nav-open sur l’élément body permet de placer un overflow-x: hidden; qui va venir empêcher l’apparition d’un scroll horizontal dans le fenêtre de votre navigateur lorsque le menu sera ouvert.

[CSS] Habiller l’élément Select de formulaire – les techniques en CSS pur

Solution pour remplacer le chevron par défaut par un picto encodé en base64

Code CSS à mettre en place:

[CSS] Un mega menu horizontal incremental avec flexbox (pure CSS)

Demo jsfiddle.net et code source zippé à télécharger.

Source HTML

Source CSS

[javascript] Importer des breakpoints CSS

Article de lullabot.com: Importing CSS Breakpoints Into JavaScript. Demo Codepen.

Version PDF pour la postérité.

[CSS] Une modale plein écran sans JavaScript (uniquement avec CSS/SCSS)

Code pen: No JS modal popup window

Fonctionnel IE11, Edge, Chrome, iPhone5, Android…

Troubleshooting:

How can I prevent the browser from scrolling on top of the page when clicking the checkbox?. Cf: solution 2 avec le display: none;

[CSS] Alignements compliqués avec Flexbox

Sources:

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite

Source: Center and right align flexbox elements.

Method #3: Flex Auto Margins & Invisible Flex Item (pseudo-element) testée et fonctionne.

[CSS] Ajuster une ancre de page à la hauteur d’un bandeau fixe (sticky)

offsetting an html anchor to adjust for fixed header [duplicate]


Autre solution

offsetting an html anchor to adjust for fixed header

[CSS] Du random en CSS avec :nth-child

Source: https://www.lottejackson.com/learning/nth-child-cicada-principle. Version PDF de l’article.

[CSS][javaScript] Styler les barres de défilement (scrollbar) du navigateur

Ressources:


La barre de défilement est un élément d’UI propre à chaque OS et navigateur. L’aspect visible sur la maquette est celui d’un OS Mac et du navigateur Safari.

Tu peux faire un test en ouvrant la page suivante sous plusieurs navigateurs et en déroulant la 1ère liste de sélection: https://ng-select.github.io/ng-select#/data-sources

Changer l’aspect de cet élément se révèle faisable dans certains cas (pas tous!) et peut poser de gros soucis de performances suivant la solution choisie.
Je vois trois solutions:

  1. Solution reposant uniquement sur CSS: c’est la plus propre, la plus légère et elle ne devrait pas poser de problèmes de performances. C’est de loin la plus rapide à mettre en place et la plus fiable (enfin… sauf si tu choisis la solution 3).
    Problème: ça fonctionnera seulement avec les dernières versions de Chrome et Safari (supports mobile et desktop) et pas avec Firefox, IE, Edge, etc… qui conserveront l’aspect natif.
  2. Solution reposant sur javaScript: cela reviendrait à mettre en place du code sâle, lourd et à s’exposer à des problèmes de performances sans pour autant garantir que l’affichage sera parfait sur tous les navigateurs.
    Il faut également ajouter que les scripts que j’ai vu fonctionnent avec le contenu qui s’affiche au 1er chargement de la page et pas forcément avec du contenu qui se régénère à la volée comme cela se produit dans une application Angular.
  3. La solution que je préconise: accepter que chaque OS et navigateur puisse avoir une scrollbar différente et ne rien toucher.
    En soi, la scrollbar de la maquette n’a pas fait l’objet d’une attention particulière en terme de design. Elle est ainsi parce que la maquette a été réalisée sous Mac.

Source: https://stackoverflow.com/a/14150577/1662176

[CSS] Trouver l’élément trop large qui fait apparaître une scroll barre horizontale dans votre page

Source: 108 byte CSS Layout Debugger.

Certains éléments vont causer l’apparition d’une barre de scroll horizontal dans votre navigateur à cause de leur largeur. La façon la plus simple de trouver la cause à ce problème est d’utiliser l’outline CSS. Voici un script par Addy Osmani qui permet d' »outliner » chaque élément d’une page.

Copier/Coller le code ci dessous dans la console de debug de votre navigateur:

© 2020 devfrontend.info

Theme by Anders NorénUp ↑