On pourrait longuement palabrer sur l'utilité d'un carrousel, mais en attendant l'arrivée du masonry layout avec display: grid-lanes; et de sa mise en page façon Pinterest - voir d'opter pour un défilement horizontal, l'élaboration de ce type de projet demeure une expérience enrichissante du fait des compétences mises en œuvre : accessibilité, CSS et JavaScript.
Cette nouvelle version est évidemment responsive et entièrement en langages natifs. De plus, ce composant fonctionne avec des images de différentes tailles, elles sont contenues à l'intérieur du bloc et centrées verticalement et horizontalement : la magie de object-fit couplé à grid.

Rappel : l'accessibilité d'un carrousel

Vous pouvez vous référer à l'article de la première version du carrousel pour des explications plus exhaustives.

• Les contenus en mouvement doivent être contrôlables : bouton pause en début de code et raccourcis clavier pour le contrôle du carrousel
• Zone live ARIA : aria-live="polite" et focus sur l'élément actif permet la lecture du panneau en cours
• Attributs ARIA : aria-controls, aria-selected et role="group" sur les boutons de la navigation par points, aria-roledescription pour indiquer le rôle de chaque contenu, aria-label complète les informations
• Arrêt du carrousel à la prise de focus

Voir la démo sur CodePen

La base HTML et ses nouveautés

• Séparation du carrousel et des éléments de contrôles, le bouton d'arrêt se situant en premier dans l'arbre DOM
• Ajout de aria-live="off" par défaut sur le conteneur
• Ajout de tabindex sur chaque panneau (0 pour le panneau actif et -1 pour les autres)

<section id="slides" aria-roledescription="Slideshow" aria-label="Description of Carousel">
	
	<!-- Slide Controls -->
	<div class="slides-panel-control">
		<div class="slides-control">
			<button type="button" class="slides-playpause" aria-controls="slides-items" aria-label="Stop Carousel" disabled>
				<svg class="playpause" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" role="img">
					<g class="play">
						<path d="m7.43 31c2.36 0 4.29-1.93 4.29-4.29v-21.4c0-2.36-1.93-4.29-4.29-4.29-2.36 0-4.29 1.93-4.29 4.29v21.4c0 2.36 1.93 4.29 4.29 4.29zm12.9-25.7v21.4c0 2.36 1.93 4.29 4.29 4.29s4.29-1.93 4.29-4.29v-21.4c0-2.36-1.93-4.29-4.29-4.29s-4.29 1.93-4.29 4.29z"></path>
					</g>
					<g class="pause">
						<path d="m6.29 0.988c1.75-0.00742 13.3 8.37 20 12.4 2.61 1.35 2.72 3.64 0.145 5.18-6.19 3.67-18.7 12.4-20.3 12.4-1.59 0.0055-2.31-1.16-2.36-2.73 0.0104-8.27-0.0208-16.5 0.0156-24.8-0.0349-1.19 0.787-2.46 2.53-2.47z"></path>
					</g>
				</svg>		
			</button>
			<button type="button" class="slides-prev" aria-controls="slides-items" aria-label="Previous Slide" disabled>
				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" role="img">
					<path d="m22.1 31c2.03-0.108 3.01-2.54 1.62-4.03l-10.4-10.8 10.4-11c2.34-2.26-1.13-5.73-3.39-3.39l-12 12.6c-0.903 0.904-0.937 2.36-0.0775 3.3l12 12.5c0.483 0.548 1.19 0.846 1.92 0.808z"></path>
				</svg>
			</button>
			<button type="button" class="slides-next" aria-controls="slides-items" aria-label="Next Slide" disabled>
				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" role="img">
					<path d="m9.9 31c-2.03-0.108-3.01-2.54-1.62-4.03l10.4-10.8-10.4-11c-2.34-2.26 1.13-5.73 3.39-3.39l12 12.6c0.903 0.904 0.937 2.36 0.0775 3.3l-12 12.5c-0.483 0.548-1.19 0.846-1.92 0.808z"></path>
				</svg>
			</button>
		</div>
	</div>
	
	<div id="slides-items" aria-live="off">
		
		<!-- Slide 1 // Active slide: class="slideactive" and tabindex="0" -->
		<div id="slide-1" class="slide-item slideactive" role="group" aria-roledescription="Slide" aria-label="1 of 3" tabindex="0">
			<figure>
				<img src="img1.webp" alt="Alternative image 1" width="1200" height="600" loading="lazy" decoding="async">
			</figure>
			<figcaption>Slide 1 Description</figcaption>
		</div>
		<!-- Slide 2 -->
		<div id="slide-2" class="slide-item" role="group" aria-roledescription="Slide" aria-label="2 of 3" tabindex="-1">
			<figure>
				<img src="img2.webp" alt="Alternative image 2" width="556" height="247" loading="lazy" decoding="async">
			</figure>
			<figcaption>Slide 2 Description</figcaption>
		</div>
		<!-- Slide 3 -->
		<div id="slide-3" class="slide-item" role="group" aria-roledescription="Slide" aria-label="3 of 3" tabindex="-1">
			<figure>
				<img src="img3.webp" alt="Alternative image 3" width="1200" height="1800" loading="lazy" decoding="async">
			</figure>
			<figcaption><strong>Slide 3 Description.</strong><br><span lang="lat">Venerem elegerit sexus mercenariae tabernaculum matrimonii in conductae post species.</span></figcaption>
		</div>
		
	</div>
	
</section>

Le code CSS et ses nouveautés

• Passage en Vanilla CSS et ajout de @layer pour une meilleure intégration dans les projets
• Effet de transition avec transition-behavior: allow-discrete; et @starting-style pour un support complet
• Exit le positionnement relatif et absolu, place à grid stack et flex
• Utilisation de display: none; sur les panneaux inactifs pour éviter l'interprétation par un lecteur d'écran
• Ajout de object-fit pour contraindre l'image à l'intérieur du conteneur

@layer resetdemo, carousel;

@layer resetdemo {
	*,
	*::before,
	*::after {
		box-sizing: border-box; 
		min-width: 0;
	}
	body {
		margin: 0;
		font-size: 1rem;
		font-family: system-ui, sans-serif;
		line-height: 1.5;
	}
	img, figure  {
		max-width: 100%; 
		height: auto;
		margin: 0;
	}
	svg {
		vertical-align: middle;
	}
	button {
		padding: 0;
		margin: 0;
		border-style: none;
		touch-action: manipulation;
		display: inline-block;
		border: none;
		background: none;
		cursor: pointer;
		
		&:focus-visible {
			outline: max(2px, .08em) dashed currentColor;
			outline-offset: max(2px, .08em);
		}	
	}
}

@layer carousel {
	:root {
		--carousel-width: 1200px;
		--carousel-aspect-ratio: 12/6; 
		--carousel-color: DarkOrchid;
		--carousel-bg: AntiqueWhite;
	}
	#slides {
		max-width: var(--carousel-width);
		margin: 3.618em auto;
		
		.slides-panel-control {
			display: flex;
			justify-content: space-between;
		}
		/* Control Buttons */
		.slides-control, .slides-dots {		
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-bottom: 1em;
			gap: 1em;
		}
		.slides-control {
			
			button {
				background-color: rgba(0, 0, 0, 0.7);
				border-radius: .3em;
				display: inline-block;
				padding: 1em;
				
				svg {
					width: 1.618em;
					height: 1.618em;
				}			
				&:disabled {
					display: none;
				}
				&:hover {
					background-color: var(--carousel-color);
				}
				:is(svg, g) {
					pointer-events: none;
					fill: #fff;
				}
			}
			.slides-playpause .play,
			.slides-playpause .playpause.paused .pause {
				display: none;
			}
			.slides-playpause .playpause.paused .play {
				display: block;
			}
		}
		/* Dots Buttons */
		.slides-dots {
			
			button {
				display: inline-block;
				padding: 1em;
				background-color: transparent;
			}
			svg {
				pointer-events: none;
				width: 1.618em;
				height: 1.618em;
				fill: rgba(0, 0, 0, 0.7);
			}
			:is(button:hover, button:focus, button:active) svg {
				fill: transparent;
				stroke: var(--carousel-color);
				stroke-width: .3ch;
			}
			button[aria-selected="true"] svg {
				fill: var(--carousel-color);
			}
		}
		@media (width < 36rem) {
			.slides-panel-control {
				display: block;
			} 
		}
	}
	
	#slides-items {
		display: grid;
		grid: 1fr / 1fr; /* Not necessary - for greater clarity */
	
		> .slide-item {
			grid-area: 1 / 1;
			overflow: hidden; /* For responsive */
			aspect-ratio: var(--carousel-aspect-ratio); /* For responsive */
			display: grid;	
			grid: 1fr / 1fr; /* Not necessary - for greater clarity */
			background: var(--carousel-bg);
	
			> * {
				grid-area: 1 / 1;
			}
			
			figure {
				align-self: center;
				justify-self: center;
				max-height: calc(var(--carousel-width) / (var(--carousel-aspect-ratio)));	
				
				img {
					aspect-ratio: var(--carousel-aspect-ratio); /* For responsive */
					max-height: calc(var(--carousel-width) / (var(--carousel-aspect-ratio)));
					object-fit: contain;
				} 
			}			
			figcaption {
				align-self: end;	
				font-size: clamp(.8em, .6em + .7vw, 1.2em);
				text-align: center;
				color: #fff;
				padding: .9em;
				background-color: rgba(0, 0, 0, 0.7);
			}
		}
		.slideactive:focus-visible {
			outline: max(2px, .08em) solid currentColor;
			outline-offset: 0;	
		}	
		/* CSS Transition */
		.slideactive {
			opacity: 1;
			transition: all 2s;
			transition-behavior: allow-discrete;
			@starting-style {
				opacity: 0;
			}
		}
		.slide-item:not(.slideactive) {
			opacity: 0;
			display: none;
		}		
	}
}

Le code JavaScript et ses nouveautés

• Ajout du focus sur l'élément en cours et gestion de tabindex (0 et -1) pour une meilleure restitution avec un lecteur d'écran
• Détection de prefers-reduced-motion et désactivation de la rotation automatique, si nécessaire
• Ajout du swipe pour mobile
• Arrêt du carrousel à la prise de focus sur le panneau en cours lorsque la rotation automatique est activée

/*
* @Adilade Slideshow/Carousel
* @See www.adilade.fr/blog/carrousel-accessible-v2/
* @Version : 2.0
*
* Keyboard : 
* Previous : left arrow or ctrl + left arrow
* Next : right arrow or ctrl + right arrow
* Pause/Play : space
* 
* Free to use - No warranty
*/

var timeInterval = '7000'; // Time between slides in ms
var slidediv = document.querySelector('#slides');
var carousel = document.querySelector('#slides-items');
var items = document.querySelectorAll('.slide-item');
var panel = document.querySelector('.slides-control');

if (carousel !== undefined && items !== undefined && carousel !== null && items !== null) {
	var itemscount = items.length;
	var btnprev = document.querySelector('.slides-prev');
	var btnnext = document.querySelector('.slides-next');
	var btnplaypause = document.querySelector('.slides-playpause');
	var btnplaypausepath = document.querySelector('.playpause');			

	// If JavaScript enabled
	btnprev.removeAttribute('disabled');
	btnnext.removeAttribute('disabled');
	btnplaypause.removeAttribute('disabled');
			
	if (itemscount > 1) {
		
		// Create Dots
		var dotbox = document.createElement('div');
		dotbox.classList.add('slides-dots');
		dotbox.setAttribute('role', 'group');
		panel.after(dotbox); 		
		for (var i=0; i<itemscount; i++) {
			dotbox.insertAdjacentHTML('beforeend', '<button type="button" aria-controls="slide-'+(i+1)+'" aria-label="Slide number '+(i+1)+'" aria-selected="'+(document.querySelector('.slideactive').getAttribute('id').slice(-1) == (i+1) ? 'true' : 'false')+'"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32" role="img"><circle cx="16" cy="16" r="13" /></svg></button>');
		}	
			
		var dots = document.querySelectorAll('.slides-dots button');
		var playpause = null;
	
		function slideprev() {
			var itemcurrent = document.querySelector('.slideactive');
			var dotcurrent = document.querySelector('.slides-dots button[aria-selected="true"]');
			var prevslide = itemcurrent.previousElementSibling;
			var prevdot = dotcurrent.previousElementSibling;
			if(prevslide === null) {
				prevslide = items[itemscount - 1];
				prevdot = dots[itemscount - 1]; 
			}
			// Remove current
			itemcurrent.classList.remove('slideactive');
			itemcurrent.blur();
			itemcurrent.setAttribute('tabindex', '-1');
			dotcurrent.setAttribute('aria-selected', 'false');
					
			// Add Next
			prevslide.setAttribute('tabindex', '0');
			prevslide.classList.add('slideactive');
			prevslide.focus();
			prevdot.setAttribute('aria-selected', 'true');
		}
		
		function slidenext() {
			var itemcurrent = document.querySelector('.slideactive');
			var dotcurrent = document.querySelector('.slides-dots button[aria-selected="true"]');
			var nextslide = itemcurrent.nextElementSibling;
			var nextdot = dotcurrent.nextElementSibling;
			if(nextslide === null) {
				nextslide = items[0];
				nextdot = dots[0];
			}
			// Remove current
			itemcurrent.setAttribute('tabindex', '-1');
			itemcurrent.classList.remove('slideactive');
			itemcurrent.blur();
			dotcurrent.setAttribute('aria-selected', 'false');
								
			// Add Next
			nextslide.setAttribute('tabindex', '0');
			nextslide.classList.add('slideactive');
			nextslide.focus();
			nextdot.setAttribute('aria-selected', 'true');
		}

		function slidepause() {
			clearInterval(playpause);
			playpause = null;
			btnplaypause.setAttribute('aria-label', 'Play Carousel');
			btnplaypausepath.classList.add('paused');
			carousel.setAttribute('aria-live', 'off');		
		}
		function slideplay() {
			playpause = setInterval(slidenext, timeInterval);
			btnplaypause.setAttribute('aria-label', 'Stop Carousel');
			btnplaypausepath.classList.remove('paused');							
		}						
		function slideplaypause() {
			if (playpause !== null) {
				slidepause();
				carousel.classList.add('btnpressed');
			} else {
				slideplay();
				carousel.classList.remove('btnpressed');
				//carousel.setAttribute('aria-live', 'off');
			}
		}
						
		// Dots Navigate
		[].map.call(dots, function(dot) {

			dot.addEventListener('click', function(e) {
				var itemcurrent = document.querySelector('.slideactive');
				var dotcurrent = document.querySelector('.slides-dots button[aria-selected="true"]');
				var dotclick = dot.getAttribute('aria-controls');
				var targetslide = document.querySelector('#'+ dotclick +'');
				var targetdot = document.querySelector('button[aria-controls="'+dotclick+'"]');

				// Remove current
				itemcurrent.setAttribute('tabindex', '-1');
				itemcurrent.classList.remove('slideactive');
				dotcurrent.setAttribute('aria-selected', 'false');
				itemcurrent.blur();
									
				// Add Target
				targetslide.setAttribute('tabindex', '0');
				targetslide.classList.add('slideactive');
				targetdot.setAttribute('aria-selected', 'true');
				targetslide.focus();
				
				if (playpause !== null) {
					slidepause();
				}
				carousel.setAttribute('aria-live', 'polite');
				
				e.preventDefault();
			
			});
			
		});
				
		// Navigate
		btnprev.addEventListener('click', function() {
			slideprev();
			if (playpause !== null) {
				slidepause();
			}
			carousel.setAttribute('aria-live', 'polite');
		});
		btnnext.addEventListener('click', function() {
			slidenext();			 
			if (playpause !== null) {
				slidepause();
			}
			carousel.setAttribute('aria-live', 'polite');
		});
		btnplaypause.addEventListener('click', slideplaypause);
		
		// Keyboard Navigate
		slidediv.addEventListener('keydown', keyHandler);		
		function keyHandler(e) {
			// Left Arrow
			if (e.keyCode === 37 || (e.ctrlKey && e.keyCode === 37)) {		
				
				slideprev();
				if (playpause !== null) {
					slidepause();
				}
				e.preventDefault();
			}
			// Right Arrow
			if (e.keyCode === 39 || (e.ctrlKey && e.keyCode === 39)) {		
				
				slidenext();
				if (playpause !== null) {
					slidepause();
				}
				e.preventDefault();
			}
			// Space
			if (e.keyCode === 32) {		
				
				slideplaypause();
				e.preventDefault();
			}
		}
		
		// Mobile/Swipe Navigate
		// Credit : https://www.kirupa.com/html5/detecting_touch_swipe_gestures.htm	
		carousel.addEventListener('touchstart', startTouch, false);
		carousel.addEventListener('touchmove', moveTouch, false);

		// Swipe Up / Down / Left / Right
		var initialX = null;
		var initialY = null;
		
		function startTouch(e) {
			initialX = e.touches[0].clientX;
			initialY = e.touches[0].clientY;
		};
		
		function moveTouch(e) {
			if (initialX === null) {
				return;
			}
		
			if (initialY === null) {
				return;
			}
		
			var currentX = e.touches[0].clientX;
			var currentY = e.touches[0].clientY;
			
			var diffX = initialX - currentX;
			var diffY = initialY - currentY;
			
			if (Math.abs(diffX) > Math.abs(diffY)) {
				// sliding horizontally
				if (diffX > 0) {
					// swiped left
					slidenext();
					if (playpause !== null) {
						slidepause();
					}
				} else {
					// swiped right
					slideprev();
					if (playpause !== null) {
						slidepause();
					}
				}  
			}				
			initialX = null;
			initialY = null;
			
			e.preventDefault();
		};				    	
				 
		// Animate Slides - Comment next line for disable auto-rotating
		playpause = setInterval(slidenext, timeInterval);
		
		// Stop Carousel on focusing slide only when Carousel auto-rotating
		document.querySelector('.slideactive').addEventListener('focus', function() {
			if(!carousel.classList.contains('btnpressed')) {
			  slidepause();
			}
		}); 
		
		// Prefers-reduced-motion
		var hasReducedMotion = (window.matchMedia('(prefers-reduced-motion: reduce)') === true || window.matchMedia('(prefers-reduced-motion: reduce)').matches === true);
		if (hasReducedMotion) {
			slidepause();
		} 
		
	} else { // End itemscount < 1 => Remove buttons controls
		btnprev.parentNode.removeChild(btnprev);
		btnnext.parentNode.removeChild(btnnext);
		btnplaypause.parentNode.removeChild(btnplaypause);
	}
	
} // End if test

Le constat

Il arrive parfois que l'installation d'un CMS complet comprenant une base de données, une zone d'administration, un contrat de maintenance et avec une prise en main parfois complexe, pour seulement quelques pages, ne soit pas nécessaire. La simplicité a souvent du bon. Mais, la possibilité d'effectuer facilement des modifications ciblées sur un site vitrine/statique est un atout non négligeable.

Le compromis du MiniCMS

Il permet de modifier simplement et aisément certains contenus textuels (prédéfini à l'avance) d'un site web statique. Il est facile à utiliser et à prendre en main sans besoin de formation.

• Fonctionne sans base de données
• Volontairement minimaliste
• Gestion de texte brut uniquement
• Permet la modification de blocs de contenu
• Permet l'ajout, la suppression et la réorganisation d'éléments
• Possibilité de gérer des liens
• Compatible mobile
• Possibilité d'implémentation sur des sites web pré-existant (sous réserve de compatibilité technique)

Pour quels usages ?

Cette solution s'adresse avant tout aux petites entreprises, artisans ou commerçants qui n'ont pas de mise à jour fréquente à effectuer : instituts de beauté, salon de coiffure, restaurant, restauration rapide, artisans du bâtiment, artisanat, hébergement touristique, etc.

Quelques exemples de contenus modifiables :

• Menu ou carte d'un restaurant
• Liste de prestations
• Horaires d'ouverture, vacances ou annonce
• Grille tarifaire

Regarder la vidéo sur YouTube

Un web mature et plus complexe

Passé d'un quasi-artisanat en 2006, la conception de site web devient une discipline d'ingénierie : plus de complexité, plus de compétences - performance, accessibilité, sécurité, etc.

• Les CSS ont mûri, au point de se rapprocher d'un langage de programmation.
• Tailwind ou Bootstrap, Vue.js ou Angular - de nombreux frameworks sont apparus, pour le meilleur et pour le pire (dont une certaine uniformité). Pourtant, le parti pris de la conception en langages natifs limite les dépendances et assure une plus grande universalité des projets dans le temps.
• Les performances et les Core Web Vitals sont devenus la norme.
• L'accessibilité s'intègre peu à peu dans les projets, même si son adhésion reste très lente.
• On peut regretter la généralisation des builders qui produisent un code assez immonde, on se croirait revenu au temps de FrontPage ou DreamWeaver.

L'IA joue les trouble-fête

Arrivé en trombe il y a à peine quelques années, l'IA s'immisce désormais dans tous les processus créatifs et techniques : code, graphisme, design, tests, etc. Mal utilisée, cela produit du code peu propre et des sites web bancals. Bien utilisée, elle augmente la productivité, la créativité tel un assistant infatigable. Le futur se jouera sur l'expérience et l'expertise.

La passion et le futur

La passion est essentielle, c'est le moteur qui fait vibrer le web. Et le futur s'annonce stimulant à tout point de vue : plus la complexité augmente, plus l'innovation constante et l'expertise deviennent nécessaires.

Intégration dans le flux de production

Passer de la découverte à l'intégration dans les méthodes de travail n'est pas chose aisée. Outre le fait que la sortie de nouveaux modèles et de nouvelles IA est fréquente, l'assimilation efficace au quotidien peut prendre du temps : tests, vérifications, qualité, modification des processus de création, etc. Il faut souvent faire un bilan régulier : quelle réelle plus-value ? Quelle amélioration de la productivité ou de la qualité ?

Des images (encore) très marquées

Première application des IA génératives, la création d'image s'améliore progressivement. Pour ce qui est du design, elles peuvent servir de base de travail et éviter un long processus de réflexion et d'essais. Parfait pour tester rapidement des idées ou servir de support à une vectorisation. À noter que les IA génératives sont très performantes dans les "associations de couleurs".

Pour les images de type "photo réaliste", le résultat reste encore fréquemment très marqué. Il faut régulièrement retoucher la colorimétrie, sans compter les hallucinations qui persistent parfois, en particulier sur les yeux.

Un exemple de "photo réaliste" générée par 3 IA différentes et qui utilisent le même prompt, il s'agit d'une photo destinée à réaliser des mockup.

Le vrai problème vient de l'uniformisation des images, elles ont tendance à toutes "se ressembler", c'est assez flagrant sur les réseaux sociaux et maintenant sur des affiches ou des illustrations. En réalité, les images générées par IA présentent souvent des caractéristiques similaires : mêmes palettes de couleurs, mêmes compositions, même esthétique "lissée".

Code : après l'euphorie, la désillusion

L'intelligence artificielle est très efficace dans le codage : en l'utilisant comme métamoteur de recherche, on évite des longues heures de recherche dans la documentation, ou sur des forums spécialisés. L'inconvénient, c'est de ne pas réellement comprendre ce que l'on fait, avec tous les risques que cela pose en termes de qualité, de sécurité et de maintenabilité du code. Aujourd'hui, on arrive à un point ou des codeurs sont embauchés pour réparer les erreurs commises par l'IA.

La question du vibe coding

Avec le vibe coding, on touche à l'expérience extrême : coder des sites web ou des applications sans rien n'y connaître (c'est-à-dire sans relire le code, le corriger, l'implémenter, le tester...). Ce genre de projet tourne quasi systématiquement à la catastrophe.

Des avantages indéniables

L'usage de l'IA, dans un process bien encadré, permet d'accélérer la productivité : résumé de contenu et rédaction de texte, génération d'images, qui peuvent servir d'ébauche, ou être utilisées comme base de travail. Codage plus rapide : snippets ou recherche de bug. Accès à l'apprentissage et à des domaines d'expertises plus élevés.

Les inconvénients et risques à long terme

• Uniformisation : c'est déjà flagrant sur les images, mais aussi sur les textes ou le code. L'homogénéisation des contenus provoque une réelle menace pour l'identité de marque, et la différenciation devient plus difficile. Reproduire la complexité et la nuance, n'est pas chose aisée. Pour le code, cela pourrait aller jusqu'à un appauvrissement des écosystèmes et à des vulnérabilités plus fréquentes.
• Perte de compétence : à force d'utiliser l'IA, les développeurs pourraient perdre des compétences ou de l'expertise. Savoir coder avant d'utiliser l'intelligence artificielle constitue une condition préalable incontournable. Cela pourrait être pire avec les nouvelles générations, biberonnées à ChatGPT durant toutes leurs études !
• Dépendance : être accoutumé à un outil devient problématique si l'on ne conserve pas le savoir-faire humain. En cas de dysfonctionnement, tout est bloqué !

À cela s'ajoute le manque de données pour l'entraînement des IA (elles ont déjà "digéré" tout ce que l'humain a produit) et le contenu de masse généré automatiquement commence à "polluer" le web.

Conclusion

Il y a fort à parier que l'IA, comme tous les outils précédents, finissent par s'intégrer dans les processus de production en conservant un certain équilibre : automatiser et accélérer la conception, tout en préservant l'expertise humaine pour la créativité, la stratégie et l'innovation. Utiliser l'intelligence artificielle comme un copilote, et non en remplacement de la compétence humaine.

Les CSS ont énormément évoluées ces dernières années et intègre en natif et avec un large support beaucoup de fonctionnalité Sass. Outre, la suppression à une dépendance pour la compilation, l'utilisation des standards natifs offre une meilleure maintenabilité pour le futur. Quelques éléments de base pour effectuer la transition de Sass vers Vanilla CSS en douceur !

Les Variables

Déjà largement utilisées, les variables sont aisément implémentables, même s'il ne faut pas en abuser. Car, là où Sass remplace les variables par leurs valeurs respectives, ce n'est pas le cas en CSS.

Les variables en Sass

$color-green: #25653B;
$a11y-lineheight: 2.55rem;

main p {
	font-color: $color-green;
	line-height: $a11y-lineheight; 
}

Les variables en CSS

:root {
	--color-green: #25653B;
	--a11y-lineheight: 2.55rem;
}

main p {
	font-color: var(--color-green);
	line-height: var(--a11y-lineheight); 
}

Imbrication ou Nesting

C'est une fonctionnalité extrêmement intéressante et puissante de Sass qui évite des répétitions et une certaine lourdeur du code. Et, bonne nouvelle, cette fonctionnalité est déjà très largement supportée en CSS (plus de 90%).

Imbrication en Sass

.card {
    border: 1px solid #ddd;
	a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	p:last-child {margin-bottom: 1em;}
}

Imbrication en CSS

Note : pour l'utilisation du sélecteur "&", vous pouvez vous référer à l'article Imbrication CSS.

.card {
    border: 1px solid #ddd;
	& a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	& p:last-child {margin-bottom: 1em;}
}

Les mixins

@mixin couplé à @include permet de définir un style de base réutilisable. Mais le code va être systématiquement réinjecté, ce qui alourdit la feuille de style.

En Sass

@mixin card {
	border: 1px solid #ddd;
	a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	p:last-child {margin-bottom: 1em;}
}

.card--home {
  @include card;
  background-color: aliceblue;
}

/* Avec variable */
@mixin card($bg: azure) {
	border: 1px solid #ddd;
	background-color: $bg;
	a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	p:last-child {margin-bottom: 1em;}
}

.card--home {
	@include card(aliceblue);
}

En CSS

En utilisant la technique BEM et un sélecteur d'attribut, on arrive au même résultat. Avec, en bonus, un résultat plus léger, le code du bloc n'ayant pas besoin d'être systématiquement réinjecté.

[class^="card"] {	
	border: 1px solid #ddd;
	& a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	& p:last-child {margin-bottom: 1em;}
}
.card--home {
	background-color: aliceblue;
}

/* En reprenant l'idée de la variable */
:root {
	--color-bg-card: azure; /* Couleur de base */
}
[class^="card"] {	
	border: 1px solid #ddd;
	background-color: var(--color-bg-card);
	& a {
		color: firebrick; 
		&:hover {color: steelblue;}
	}
	& p:last-child {margin-bottom: 1em;}
}
.card--home {
	--color-bg-card: hotpink; /* Couleur de remplacement */
}

La règle @import

La fonction @import qui permet d'inclure des fichiers est supportée en CSS depuis bien longtemps. Mais, là où Sass importe et compile le contenu des fichiers, ce n'est pas le cas en CSS. Ce qui a pour conséquence d'augmenter le nombre de requêtes auprès du serveur (1 @import = 1 requête). Pourtant, il existe une astuce : lors de la minification, il est possible d'intégrer le contenu des fichiers importés, notamment en utilisant postcss-import (généralement inclut dans les outils de minification) avec un fonctionnement identique à celui de Sass.

Exemple en CSS

/* ==Core */
@import "folder/variables.css";
@import "folder/reset.css"; 

/* ==Utilities & Components */
@import "folder/helpers.css";
@import "folder/skip.css";

Les pseudo-classes :is et :has

Ces pseudo-classes permettent de cibler précisément des éléments et de simplifier l'écriture : fort utile à bien des égards. Le support complet de :is et :has n'est que très récent (Baseline 2023) !

Exemples en CSS

/* Sans les pseudo-classes */
.card h2, 
.card cite {
	background-color: steelblue;
}
/* Avec les pseudo-classes */
.card :is(h2, cite) {
	background-color: steelblue;
}

On cible tous les paragraphes, enfants de la classe .card, qui contiennent la balise cite.

.card p:has(cite) {
	background-color: steelblue;
}

Conclusion

Avec une approche méthodique et une planification soigneuse, le passage de Sass à Vanilla CSS peut être réalisé de manière efficace. Sur des projets extrêmement complexes nécessitant des fonctions spécifiques ou des boucles, cela peut être un peu plus long, car il n'y a pas encore d'équivalent en pur CSS, il faudra, pour cela, réintégrer le code compilé.

Le RGAA français

• Il s'applique aux sites web, applications mobiles, documents bureautiques et au mobilier urbain numérique
• Il comporte 106 critères - précis et documentés
• Le périmètre d'application va des organismes publics (état, collectivités territoriales, etc) aux entreprises privées dont le chiffre d'affaires en France est supérieur à 250 millions d'euros
• Il nécessite une déclaration d'accessibilité, la mention de la conformité en page d'accueil et un schéma pluriannuel
• Des sanctions pouvant aller jusqu'à 20 000 euros
• Il est entré en application (en théorie !)

La norme européenne EN 301 549

• Un champ d'application très large : sites web (y compris les outils d'édition des systèmes de gestion de contenu), applications mobiles, documents bureautiques, système de communication audio et vidéo, dispositifs matériels (bornes interactives, terminaux de paiement, etc), logiciels, documentation et services d'assistance, accès aux services d'urgence
• Des critères et tests spécifiques à chaque champ d'application
• Le périmètre d'application va des organismes publics (état, collectivités territoriales, etc) aux entreprises privées de plus de 10 salariés ou dont le chiffre d'affaires est supérieur à 2 millions d'euros
• Il nécessite une déclaration d'accessibilité pour tous les supports numériques, la mention de la conformité et un schéma pluriannuel
• Des sanctions pouvant aller jusqu'à 50 000 euros
• Entre en application en juin 2025 pour les nouveaux contenus et produits et juin 2030 pour les contenus et produits déjà existants

Conclusion

Le RGAA et la norme EN 301 549 sont tous les deux basés sur les WCAG, mais la norme européenne propose un cadre plus large en contrepartie de plus de flexibilité dans les méthodes d'évaluation. Cette dernière est une référence pour les marchés publics européens.

Après avoir longtemps travaillé avec KNACSS (obsolète depuis), la question d'une base de travail pour mes projets se posait. Construire son propre framework CSS à partir de zéro peut sembler un peu fou, mais le temps investit au départ est largement compensé par la compréhension globale et sa facilité de mise en œuvre dans des projets concrets !

Acquérir des compétences

C'est l'un des premiers avantages : travailler sur ce type de projet permet l'acquisition de compétences spécifiques, une compréhension plus approfondie des subtilités des CSS et une expérience d'apprentissage des plus agréable - sans doute plus intéressante que n'importe quelle formation !

Adapté à vos besoins et votre méthode de travail

Les frameworks existants sont généralistes et prévoient un support large et de nombreux cas de figure (par exemple un système de grille à 12 colonnes, pour ma part, je n'ai jamais dépassé 5) et sont donc souvent plus lourd, même en n'incluant que les composants que vous utilisez.
À titre d'exemple, je n'ai pas ajouté le support de progress que je n'ai jamais employé.

On commence par définir la structure

Vous pouvez vous inspirer de projets existants pour créer votre propre structure (en SASS, Less ou CSS). Généralement, la base se constitue de variables, d'un mini reset, d'une base pour la typographie et l'espacement, sans oublier l'accessibilité.
Une seconde partie se constitue de composants et d'utilitaires comme les formulaires, les tables, un système de grille, etc.
Le but est de rester le plus minimaliste possible et de n'y inclure que ce que vous utilisez régulièrement.

Voici la structure de mon projet en SASS - c'est une méthode parmi d'autre, à adapter selon vos besoins et votre méthode de travail.

/* ==Core */
@import "variables.scss";
@import "reset.scss";  
@import "a11y.scss"; 
@import "layout.scss"; /* Typography & Spacings */

/* ==Utilities & Components */
@import "helpers.scss";
@import "skip.scss";
@import "tables.scss";
@import "pre.scss";
@import "video.scss"; 
@import "alerts.scss";
@import "badges.scss";
@import "details.scss"; /* Details & Summary */
@import "burger.scss"; /* Menu */

/* ==Forms */
@import "forms.scss";
@import "formscheckbox.scss";
@import "formsselect.scss";
@import "formsradio.scss";
@import "formspassword.scss";
@import "buttons.scss";

/* ==Grids */
@import "grids.scss"; /* Grid 2-5 */

/* ==Utilities 2 */
@import "responsive.scss";
@import "print.scss"; 

/* ==Customer Styles  */
@import "customer.scss";

Quelques astuces

• Limiter les couleurs au strict minimum.
• Limiter l'usage des classes et des variables, surtout les variables CSS.
• Séparer au maximum les composants - en regardant le code ci-dessus, vous verrez un fichier séparé pour les champs de mots de passe (que je n'utilise pas sur tous les sites).
• Intégrer l'accessibilité - avec une compatibilité WCAG et RGAA - dès le début de la conception (typographie, contraste, espacement des lignes et des paragraphes, etc).
• Ajouter quelques classes utilitaires de base comme le centrage de textes et le centrage vertical à l'intérieur d'un bloc.
• Ajouter des composants de base que vous utilisez régulièrement comme ribbon, cards, hero section, etc.

Tester et documenter (si besoin)

Créer une page de test incluant tous les composants et différentes variations : bloc de texte, balises h1 à h6, composants de formulaire, boutons, grilles, etc. Vous pourrez ainsi établir une stratégie pour effectuer des tests complets sur différents navigateurs et appareils (ordinateurs, mobiles et même téléviseurs).

Maintenance

Si votre code est bien conçu et structuré dès le départ, la maintenance reste assez faible - généralement 2 ou 3 fois par an : parfois quelques bugs visuels ou l'ajout de nouveautés CSS. Par exemple, j'ai récemment ajouté le support de aspect-ratio pour les vidéos.

Allez plus loin

Si vous souhaitez développer encore un peu plus votre framework, vous pouvez ajouter de nombreux éléments en fonction de vos besoins :

• Boutons de partages.
• Le support étendu du focus.
• Le support des téléviseurs HD et 4K.
• Des templates prêts à l'emploi avec grid-template-areas : articles, galerie d'images, page d'accueil, etc.