Alsacréations : Actualités et tutoriels web, HTML, CSS, JavaScript

https://www.alsacreations.com/

Conception de sites web de qualité en HTML, CSS, JavaScript, grâce aux standards W3C, accessibilité

Articles

  • Les modes d'apparence Light mode et Dark mode 22 juillet, par Raphael
    Le mode sombre (dark mode) consiste à adopter des fonds de couleur sombre sur les interfaces utilisateur. Selon Wikipedia, ce mode serait utile pour réduire la fatigue visuelle et la consommation en énergie par rapport aux autres modes d'affichage. Un très grand nombre de personnes en sont (…)
  • Pixels et Bretzels la 100e 6 mars, par Rodolphe
    Les années passent, Pixels & Bretzels 🥨 se renouvelle (qui d'entre vous utilise encore le nom « WdStr » ?), mais garde le même cap : continuer de vous proposer régulièrement des conférences et rencontres, que ce soit dans votre cœur de métier ou pour vous faire prendre conscience de (…)
  • Dialog, Modal, Popover : la synthèse 9 février, par Raphael
    L'arrivée de l'attribut et de l'API HTML popover facilite la gestion de tous les éléments qui doivent s'afficher au-dessus du contenu d'une page Web (fenêtre modale, tooltip, menu déroulant, etc.). Cette nouvelle fonctionnalité vient s'ajouter à certaines déjà existantes, au point où l'on ne (…)
  • Optimiser le poids des images SVG 1er février, par Rodolphe
    Les images SVG sont désormais omniprésentes sur le web : illustrations, schémas, décoration, icônes, ce format vectoriel se prête bien à toutes sortes de formes simples car il est léger et étirable à l'infini produisant un beau résultat sur les écrans à forte densité de pixel (hdpi, retina...). (…)
  • CSS :has() le sélecteur de parent, mais bien plus encore ! 18 janvier, par Raphael
    La pseudo-classe :has() réalise le fantasme historique de pouvoir enfin "cibler le parent" en CSS… mais elle fait bien plus que ça ! :has() est une pseudo-classe CSS issue des spécifications "Selectors level 4" où elle est décrite comme "sélecteur relationnel". Le sélecteur :has() cible un (…)
  • Mettre en surbrillance ligne et colonne au survol d'une table 5 janvier, par Yordi
    Aujourd'hui, il nous est possible de faire énormément de choses avancés en CSS. Cependant quelque chose qui semble plus ou moins simple n'est pas toujours aussi simple que ce que l'on espérait, voir pas du tout. Le projet sur lequel je travaille affiche énormement de table de données (...)
  • Mettre en surbrillance ligne et colonne au survol d'une table 5 janvier, par Yordi
    Aujourd'hui, il nous est possible de faire énormément de choses avancés en CSS. Cependant quelque chose qui semble ± simple n'est pas toujours aussi simple que ce que l'on espère, voir pas du tout. Le projet sur lequel je travaille affiche énormément de table de données (<table>). Pour (…)
  • Animer un bouton burger simple avec SVG et CSS 19 décembre 2023, par Raphael
    Le format SVG peut paraître parfois un peu intimidant, et l'associer à des transitions ou des animations CSS semble encore plus audacieux pour bon nombre de personnes. Cependant, dans certains cas, l'alchimie entre SVG et CSS est aussi bénéfique qu'extrêmement simple à mettre en oeuvre. Dans ce (…)
  • Les easter eggs sur le web 4 décembre 2023, par Elise_Hamm
    Article rédigé suite à un stage d'observation dans l'équipe d'Alsacréations Lorsque l'on consulte un site web, nous pouvons tous voir le code source (avec ctrl + U » ou en faisant un clic droit puis inspecter). Quelques sites en profitent pour dissimuler des easter eggs le plus souvent sous la (…)
  • Choisir entre balance et pretty pour text-wrap 24 novembre 2023, par Rodolphe
    La propriété CSS text-wrap issue de CSS Text Module Level 4 permet de contrôler la façon dont le texte est enveloppé et réparti dans un conteneur. Elle possède deux nouvelles valeurs : pretty et balance, en plus des valeurs plus traditionnelles et historiques wrap (qui est le défaut : un retour (…)
  • WordPress : associer les taxonomies catégories et étiquettes aux Pages 6 novembre 2023, par Rodolphe
    Le CMS WordPress propose nativement dans sa gestion de contenu des Articles (contenus classés temporellement par date de publication) et des Pages. Ces deux entités sont relativement semblables, mais par défaut les Pages manquent de fonctionnalités pourtant proposées avec les Articles : les (…)
  • Qu'est-ce qu'un type MIME ? 13 octobre 2023, par Rodolphe
    Un type MIME est un mécanisme utilisé pour indiquer le type de contenu d'un fichier transmis sur Internet (et ce de multiples façons), à l'aide d'un format très simple : type/sous-type. Un type qui mime. Historiquement, MIME signifie Multipurpose Internet Mail Extensions, et provient donc du (…)
  • Adapter et migrer votre ancien site PHP vers PHP8 11 septembre 2023, par Rodolphe
    Vous savez déjà sûrement que PHP8 est la version actuelle de PHP, et que la branche 7 est officiellement en fin de vie (end of life). La version 8.0 précisément ne dispose plus que de correctifs de sécurité, il faut en réalité viser PHP 8.1 et 8.2, respectivement maintenus jusqu'en 2024 et 2025. (…)
  • Les Container Queries en CSS 18 août 2023, par Raphael
    CSS Container Queries (ou "requêtes de conteneur" ?) permettent d'appliquer des styles à un élément en fonction des propriétés de son conteneur, généralement sa taille. Il s'agit d'un mécanisme complémentaire aux historiques Media Queries qui, eux, détectent les caractéristiques de l'ensemble (…)
  • Les raccourcis de propriétés (property shorthand) en JavaScript 9 mai 2023, par Rodolphe
    La property shorthand que l'on peut traduire par raccourci de propriété est une syntaxe en JavaScript qui permet de créer et d'initialiser des propriétés d'objet de manière plus concise. Elle existe depuis ES6, c'est-à-dire ECMAScript 2015 avec un très bon support donc il n'y a aucune raison de (…)
  • La propriété image-rendering en CSS 25 avril 2023, par Rodolphe
    La propriété image-rendering fait partie de la spécification CSS Images Module et est utilisée pour indiquer comment une image doit être rendue par le navigateur lorsqu'elle est affichée sur une page Web. Cela peut être utile pour améliorer l'apparence des images lorsqu'elles sont affichées à (…)
  • Lancement de SchnapsGPT 1er avril 2023, par Rodolphe
    C'est avec beaucoup d'émotion que nous pouvons dévoiler aujourd'hui SchnapsGPT un agent conversationnel de nouvelle génération issu de nos laboratoires de développement. Durant des années, nous avons planifié, mis au point et conçu ce projet innovant, construit autour de techniques (…)
  • Navigation Timing API 21 mars 2023, par Rodolphe
    Navigation Timing API est une interface de programmation qui permet d'accéder à des informations sur les performances de navigation d'un site Web, générées par le navigateur. Cela correspond à peu près aux informations que l'on trouve dans l'onglet Performance des devtools mais avec un accès (...)
  • Les Web Workers en action 14 mars 2023, par Rodolphe
    Les web workers sont des threads JavaScript qui permettent de déléguer des tâches longues et/ou intensives en CPU à des processus en arrière-plan, afin d'éviter de bloquer l'interface de l'application web. Cela signifie que vous pouvez exécuter du code JavaScript qui prend du temps à (...)
  • Deno, le futur de Node ? 7 mars 2023, par Rodolphe
    Deno est un environnement d'exécution JavaScript et TypeScript qui a été pensé et conçu pour être une alternative à Node.js. Il permet à ce titre d'exécuter du code JavaScript, en-dehors d'un navigateur c'est-à-dire en ligne de commande ou en mode serveur grâce au moteur V8 de Chromium... mais (...)