Apprendre le marketing sur le net
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 […]
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 […]
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 […]
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: […]
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 […]
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 […]
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 […]
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 […]
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. […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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. […]