En tant qu’agence web spécialisée WordPress, Elementor fait partie des outils que nous utilisons régulièrement pour développer des sites performants pour ses clients. Ce page builder, devenu un standard de l’écosystème WordPress, continue d’évoluer pour répondre aux exigences modernes du web. La version 3.26 apporte des modifications techniques significatives qui méritent une analyse approfondie pour en comprendre tous les impacts sur nos développements.
Sommaire
Évolution du support navigateur
Nouvelle politique de compatibilité
Elementor 3.26 met à jour sa politique de support des navigateurs en abandonnant la prise en charge des anciennes versions de Safari. Les versions désormais supportées sont :
- Chrome 100+ (depuis mars 2022)
- Firefox 100+ (depuis mai 2022)
- Safari 15.5+ (depuis mai 2022)
Cette décision s’aligne sur l’initiative Baseline de Google, assurant la compatibilité avec les fonctionnalités interopérables sur tous les navigateurs majeurs depuis plus de 30 mois.
Nouvelles fonctionnalités techniques disponibles
Cette mise à jour permet l’utilisation de propriétés modernes précédemment inaccessibles :
- Propriété CSS inset (Safari 14.1+)
- Propriété CSS aspect-ratio (Safari 15+)
- Propriétés float: inline-start et float: inline-end (Safari 15+)
- Pseudo-classe CSS :has() (Safari 15.4+)
- Règles @layer (Safari 15.4+)
- Attribut loading sur les balises img/iframe (Safari 15.4+)
- Balise HTML dialog (Safari 15.4+)
- Attribut HTML inert (Safari 15.5+)
Optimisations de performance
Amélioration de la gestion Swiper
La version 3.26 corrige un problème de longue date concernant le chargement des styles Swiper :
- Suppression du chargement systématique de swiper.min.css
- Les widgets doivent désormais déclarer explicitement leurs dépendances via
get_style_depends() - Réduction de 26,7 kb sur les pages sans carrousel (16,4 kb pour swiper.min.css et 10,2 kb pour e-swiper.min.css)
Optimisations DOM
Labels accessibles
Le code des éléments pour lecteurs d’écran est optimisé :
Ancien format :
<button type="button">
<i class="eicon-plus" aria-hidden="true"></i>
<span class="elementor-screen-only">MY TEXT</span>
</button>Nouveau format :
<button type="button" aria-label="MY TEXT">
<i class="eicon-plus" aria-hidden="true"></i>
</button>Widgets carrousel
L’expérience “Optimized Markup” s’étend aux widgets carrousel :
- Suppression des wrappers
.elementor-swipersuperflus - Impact sur quatre widgets Pro de type carrousel
- Conservation des fonctionnalités avec une structure DOM allégée
Optimisation globale des widgets
Le système de wrapping des widgets est simplifié :
Structure classique :
<div class="elementor-widget elementor-widget-{name}">
<div class="elementor-widget-container">
…
</div>
</div>Structure optimisée :
<div class="elementor-widget elementor-widget-{name}">
…
</div>Exceptions maintenues pour 6 widgets spécifiques :
- Spacer
- Menu
- Loop
- TOC
- Form
- Hotspot
Améliorations d’accessibilité
Gestion des carrousels
Nommage sémantique
- Nouveau contrôle “Name” pour les widgets carrousel
- Applicable aux widgets : Image Carousel, Media Carousel, Testimonial Carousel, Reviews, Slides
- Utilisation des noms dans les attributs aria-label
Attributs ARIA standardisés
Implémentation cohérente des attributs :
role="region"au niveau du carrouselaria-roledescription="carousel"role="group"pour les slidesaria-roledescription="slide"aria-labelpersonnalisé pour les puces de pagination
Accessibilité de l’éditeur
Les préréglages “Add New” sont désormais entièrement accessibles au clavier :
- Navigation par tabulation
- Ajout facilité de sections
- Ajout facilité de conteneurs
- Ajout facilité de templates
Intégration Gutenberg
Support des blocs dans l’éditeur Elementor
Elementor 3.26 permet désormais :
- L’affichage des blocs Gutenberg dans l’éditeur
- L’ajout de widgets Elementor à côté des blocs
- La conservation des blocs Gutenberg existants
Impact sur WooCommerce
Cette intégration résout plusieurs problèmes liés à WooCommerce :
- Affichage correct des pages auto-générées
- Édition possible des pages utilisant les blocs WooCommerce
- Coexistence des widgets Elementor et des blocs WooCommerce
Expérimentations et fonctionnalités stables
Fusion des fonctionnalités expérimentales
Optimized Control Loading
- Amélioration du TTFB (Time To First Byte)
- Optimisation du chargement des contrôles côté serveur
- Suppression conditionnelle des contrôles non nécessaires en frontend
Migration Swiper
- Adoption complète de Swiper 8
- Suppression des fichiers Swiper 5
- Uniformisation de la bibliothèque de carrousel
Nested Elements en version stable
- Passage du statut beta à stable
- Support des Nested Tabs
- Support des Nested Accordion
- Support des Nested Carousels
Element Caching par défaut
- Activation automatique sur les sites existants
- Réduction de 99% de l’utilisation mémoire serveur
- Cache intelligent des widgets statiques uniquement
- Exclusion automatique du cache pour les widgets dynamiques
Modifications techniques pour les développeurs
Classe .elementor-widget-container dépréciée
Les développeurs d’extensions doivent :
- Éviter l’utilisation de cette classe
- Mettre à jour les sélecteurs CSS
- Adapter les sélecteurs JavaScript
Support du DOM optimisé
Nouvelle méthode à implémenter :
public function has_widget_inner_wrapper(): bool {
return false; // Pour le support du DOM optimisé
}Migration Swiper
Modifications nécessaires :
- Remplacement de
.swiper-containerpar.swiper - Remplacement de
.swiper-container-horizontalpar.swiper-horizontal - Test des fonctionnalités avec Swiper 8
Conclusion
Elementor 3.26 apporte des améliorations techniques substantielles qui impactent les performances, l’accessibilité et la compatibilité. Ces modifications nécessitent une attention particulière lors de la mise à jour, particulièrement pour les sites utilisant des extensions tierces. La documentation technique complète est disponible pour les développeurs souhaitant adapter leurs extensions aux nouvelles normes.
Chez Promatec Digital, nous accompagnons nos clients dans l’optimisation continue de leurs sites WordPress. Ces évolutions techniques d’Elementor nous permettent de maintenir des standards élevés de performance et d’accessibilité. Pour toute question sur la mise à jour de votre site vers Elementor 3.26 ou sur l’impact de ces changements sur votre projet, n’hésitez pas à nous contacter.
Vous avez aimé l'article ? Partagez-le autour de vous !
Vous aimerez aussi...
