Catégories
Astuces et Design

Vitaux Web de base | Astuces CSS

Core Web Vitals est ce que Google appelle une nouvelle collection de trois mesures de performances Web: LCP: La plus grande peinture contentieuse FID: Premier délai d'entrée CLS: Décalage de mise en page cumulatif Ce sont tous mesurables. Ils ne sont pas encore dans Lighthouse (par exemple, l'onglet Audits dans Chrome DevTools), mais cela semble […]

Catégories
Astuces et Design

Conseils CSS pour les nouveaux développeurs

Que le 4 soit avec vous! Si vous avez apprécié cette salutation, vous adorerez les trucs ringards qui vont suivre. Au cours d'une soirée, j'ai noté certains des conseils CSS que j'ai appris au cours des dernières années en tant que développeur et les ai mis dans cet article 😃. J'ai gardé mon conseil le […]

Catégories
Astuces et Design

Comprendre et utiliser les unités rem en CSS – SitePoint

Les unités CSS ont fait l'objet de plusieurs articles ici sur SitePoint (tels que A Look at Length Units en CSS, The New CSS3 Relative Font Sizing Units et The Power of em Units in CSS). Dans cet article, nous augmentons le nombre en examinant en profondeur unités rem, qui ont une excellente prise en […]

Catégories
Astuces et Design

Comment créer des pages imprimables avec CSS – SitePoint

Cet article a été mis à jour en 2020 pour refléter les dernières meilleures pratiques en matière de style d'impression CSS. Dans cet article, nous passons en revue l'art de créer des pages Web imprimables avec CSS. "Qui imprime les pages Web?" Je t'entends pleurer! Relativement peu de pages seront reproduites sur papier. Mais considérez: […]

Catégories
Astuces et Design

Les polices Google les plus rapides – CSS Wizardry – Optimisation des performances Web

19 mai 2020 Écrit par Harry Roberts sur CSS Wizardry. Table des matières Essai Par défaut / hérité font-display: swap; CSS asynchrone preload preconnect Prime: font-display: optional; Comparaisons et visualisations Résultats Extrait Google Fonts Async Pour la plupart, les polices Web sont aujourd'hui plus rapides que jamais. Avec plus Comportement FOUT / FOIT standardisé des […]

Catégories
Astuces et Design

Flexbox-like "juste mettre des éléments dans une rangée" avec grille CSS

Cela m'est venu à l'esprit pendant que nous parlions de flexbox et gap cette raison que nous atteignons parfois pour flexbox est de jeter quelques boîtes d'affilée et de les espacer un peu. Mon cerveau atteint toujours pour flexbox dans cette situation, et avec gap, il continuera probablement de le faire. Il convient de noter […]

Catégories
Astuces et Design

Transformations de blocs WordPress | Astuces CSS

Ce fut l'année de Gutenberg pour nous ici à CSS-Tricks. En fait, c'est un objectif que nous nous étions fixé à la fin de l'année dernière. Nous sommes beaucoup plus avancés que je pensais que nous serions, en écrivant tous Nouveau contenu dans l'éditeur de blocs¹, permettant à l'éditeur de blocs tout contenu maintenant. Cela […]

Catégories
Astuces et Design

Premiers pas dans une disposition possible de maçonnerie CSS

Ce n'est pas au niveau de la demande comme, par exemple, les requêtes de conteneurs, mais être capable de faire des mises en page «maçonnerie» en CSS a été une grande demande pour les développeurs CSS depuis longtemps. La maçonnerie étant ce type de disposition où des éléments de taille inégale sont disposés en rangées […]

Catégories
Astuces et Design

8 exemples expérimentaux fantastiques d'émoji animés CSS

Emoji semble avoir envahi toutes les parties de notre culture. Ce qui a commencé comme une fonctionnalité de niche pour les utilisateurs de téléphones mobiles et les geeks informatiques est devenu son propre phénomène. Maintenant, nous voyons ces petits personnages sur des t-shirts, des campagnes de marketing et même des longs métrages pas si drôles. […]

Catégories
Astuces et Design

Correction CSS pour 100vh dans WebKit mobile

Correction CSS pour 100vh dans WebKit mobile Il n'y a pas longtemps, la façon dont WebKit gère 100vh en CSS, ignorant essentiellement le bord inférieur de la fenêtre du navigateur. Certains ont suggéré d'éviter d'utiliser 100vh, d'autres ont proposé différentes alternatives pour contourner le problème. En fait, ce problème remonte à quelques années lorsque Nicolas […]

Catégories
Astuces et Design

Comment apprivoiser la hauteur de ligne en CSS

En CSS, line-height est probablement l'un des attributs les plus mal compris et pourtant les plus couramment utilisés. En tant que concepteurs et développeurs, lorsque nous pensons à line-height, nous pourrions penser au concept de diriger à partir de la conception imprimée – un terme, assez intéressant, qui vient de mettre littéralement des morceaux de […]

Catégories
Astuces et Design

10 façons de masquer des éléments en CSS – SitePoint

Il existe plusieurs façons de masquer un élément en CSS, mais elles diffèrent dans la façon dont elles affectent l'accessibilité, la mise en page, l'animation, les performances et la gestion des événements. Animation Certaines options de masquage CSS sont tout ou rien. L'élément est soit entièrement visible soit entièrement invisible et il n'y a pas […]

Catégories
Astuces et Design

Sites Web basés sur des notions | Astuces CSS

Je suis un grand fan de Notion, comme vous le savez probablement dans la couverture précédente et la vidéo récente. Il est toujours intéressant de voir ce que les autres font avec Notion, et même comment Notion utilise Notion. Je dirais que la plupart des utilisations de Notion sont privées et internes, mais n'importe quelle […]

Catégories
Astuces et Design

Utilisation de masques CSS pour créer des bords dentelés

Je travaillais sur un projet qui avait ce bord dentelé soigné au bas d'une image de bannière. Vous cherchez tranchant… À plus d'un titre. C’est quelque chose qui m’a fait réfléchir pendant une seconde et j’ai appris quelque chose dans le processus! Je pensais que j'écrirais comment je l'ai abordé pour que vous puissiez l'utiliser […]

Catégories
Astuces et Design

5 projets pour vous aider à maîtriser les CSS modernes – SitePoint

Beaucoup prétendent que CSS n'est pas un langage de programmation. Je suis d'accord – c'est plus dur. Une maîtrise du CSS requiert des compétences en conception, détermination, inventivité, expérience, ainsi qu'en codage (notamment lors de l'utilisation de préprocesseurs tels que Sass). CSS suggère mises en page et styles dans le navigateur. Un navigateur peut interpréter […]

Catégories
Astuces et Design

min (), max () et clamp () sont de la magie CSS!

Belle vidéo de Kevin Powell. Voici quelques notes, réflexions et choses que j'ai apprises en le regardant. Dès leur sortie, j'étais surtout obsédé par font-size utilisation, mais ce ne sont que des fonctions, donc ils peuvent être utilisés partout où vous utilisez un nombre, comme une longueur. Parfois, une utilisation assez basique permet un code […]

Catégories
Astuces et Design

Chronologies d'animation CSS: Construire une machine Rube Goldberg

Les animations en plusieurs étapes peuvent aider à donner vie à des sites Web, mais elles peuvent être difficiles à écrire et à maintenir en CSS. Pour cette raison, de lourdes bibliothèques JavaScript sont souvent ajoutées pour faciliter la création de ces animations. Dernièrement, j'ai utilisé des propriétés personnalisées pour planifier des chronologies CSS pures […]

Catégories
Astuces et Design

Des choses passionnantes à l'horizon pour la mise en page CSS

Michelle Barker note que cela a été une sacrée semaine pour nous, les nerds de la mise en page CSS. Firefox possède depuis longtemps les meilleurs DevTools pour CSS Grid, mais Chrome est sur le point de rattraper son retard et d'aller un peu mieux en visualisant les numéros et les noms des lignes de […]

Catégories
Astuces et Design

Prenons une plongée profonde dans la propriété CSS Contain

Par rapport au passé, les navigateurs modernes sont devenus très efficaces pour rendre le Web enchevêtré de code HTML, CSS et JavaScript fourni par une page Web typique. Il suffit d'un simple millisecondes pour rendre le code que nous lui donnons en quelque chose que les gens peuvent utiliser. Que pourrions-nous faire, en tant que […]

Catégories
Astuces et Design

Création d'un curseur de plage accessible avec CSS

29 avril 2020 J'ai toujours aimé explorer comment rendre les éléments sémantiques et accessibles esthétiquement agréables. Et oui, c'est possible. Me mettre au défi de le faire a amélioré mes compétences CSS. Aujourd'hui, nous allons parler de input(type= »range »). Ces entrées dans lesquelles vous sélectionnez une valeur à partir d'un curseur qui a un pouce dessus. […]