En dehors des Floats, la spécificité en CSS est l'un des concepts les plus difficiles à comprendre au sujet des feuilles de style en cascade (CSS). Les différents poids des sélecteurs (ex : h1, p, .bonjour, #bonjour,...) est généralement la raison pour laquelle vos règles CSS ne s'appliquent pas à certains éléments.

Afin de minimiser le temps de recherche des bugs, vous devez comprendre comment les navigateurs interprètent votre code CSS. Et pour comprendre cela, vous devez avoir une bonne compréhension de la façon dont fonctionne la spécificité. Dans la plupart des cas, les problèmes sont causés par le simple fait que quelque part entre vos règles CSS, vous avez défini un sélecteur plus spécifique qu'un autre.

La spécificité en CSS n'est pas simple. Cependant, il existe des méthodes pour l'expliquer de manière simple et intuitive. Et c'est justement le sujet de cet article.

Jetons un œil sur quelques problèmes importants liés à la spécificité en CSS ainsi que des exemples, des règles, des principes, des solutions et des ressources.

Une des nouvelles fonctionnalités proposées par Joomla! 3 est l'implémentation de LESS. Beaucoup ont déjà entendu parlé de ce que cette fonctionalité apporte et comment elle peut être utilisée, mais pour ceux qui ne la connaitraient pas (ou qui veulent se rafraichir la mémoire), l'article qui suit expose certains de ses bénéfices et comment en faire moins (LESS) dans Joomla!

LESS est une feuille de style dynamique. Pour comprendre plus facilement LESS, on peut dire que c'est une fonctionnalité très proche du PHP. En effet, un petit peu comme le PHP qui est interprété par le serveur et qui renvoies le code HTML correspondant, LESS est interprété par le serveur et ce dernier renvoies le code CSS correspondant. C'est aussi simple que cela.

Pour être plus précis, LESS apporte au CSS des fonctionnalités supplémentaires. Cet article se focalise sur trois d'entre elles : les variables, les mixins et les fonctions.

La construction d'une newsletter repose sur un template. Celui-ci apporte 2 bénéfices principaux :

• rigueur et efficacité : sur le principe d'un modèle, le template est une référence pour des Newsletters qui ont la même structure
• application de styles css : le template comporte des styles css pré-établis qui seront appliqués à la newsletter lors de son chargement

Savez-vous que vous pouvez inspecter un élément html, pré-appliquer un style sur votre site ou ajouter et supprimer un bloc html sans avoir à modifier un fichier ? Avez-vous déjà voulu savoir quelle police a été employée sur un site Web en particulier, quelle couleur a été utilisée pour un titre, ou quelle est la dimension d'une image affichée ? Oui, toutes les réponses à ces questions peuvent être trouvées grâce à la plupart des navigateurs.

En effet, un ensemble d'outils de création et de débogage Web sont intégrés à la plupart des navigateurs, permettant aux développeurs Web de repérer facilement et efficacement les problèmes de mise en page, les points d'arrêt Javascript et d'obtenir des informations sur l'optimisation du code.

Ils peuvent vous aider à diagnostiquer rapidement les problèmes, ce qui vous aidera à construire un meilleur site web.

Joomla 4 est actuellement en développement. Il faudra attendre encore plusieurs mois avant la sortie de Joomla 4, mais un travail est déjà en cours sur la compatibilité des templates Joomlashack.

L'un des changements les plus importants dans Joomla 4 est la mise à niveau de Bootstrap 2 vers Bootstrap 4. Cependant, une chose que nous avons découverte est que Joomla 4 ne comptera plus exclusivement sur Bootstrap.

Joomla 4 s'appuiera également sur CSS Grid, une méthode CSS qui révolutionne l'industrie du design Web.

Bootstrap 4 et CSS Grid seront les outils utilisés pour la conception du frontend dans Joomla 4.

Joomla comptera sur Bootstrap 4 pour l'interface utilisateur, et CSS Grid pour les mises en page du frontend. L'équipe de Joomla apporte ce changement parce qu’elle croit que CSS Grid sera de plus en plus utilisé dans le futur. Joomla 3 se basait sur une ancienne version de Bootstrap. L'espoir est que cette nouvelle approche permettra d'éviter des problèmes similaires avec Joomla 4.

Deux fonctionnalités de Joomla vous permettent de placer facilement des modules directement dans des articles :

• loadposition vous permet de publier tous les modules à une position spécifique.
• loadmodule vous permet de publier seulement un module particulier.

Un de nos étudiants utilisait ces fonctionnalités pour créer ses propres mises en page mais n'était pas satisfait de la façon dont les modules apparaissaient dans son article. Il voulait plus de contrôle.

Ce tutoriel va vous montrer comment placer des modules dans vos articles avec plus de style.

L'un des changements majeurs dans le futur Joomla 4 est l'adoption de CSS Grid. 

CSS Grid révolutionne l'industrie de la conception de sites web et va rapidement devenir une norme sur Internet.

Joomla conservera probablement Bootstrap 4 pour des raisons de rétrocompatibilité. Cependant, le futur est clair. À long terme, l'avenir de la conception du frontend de Joomla sera CSS Grid. Vous pouvez déjà voir CSS Grid en action dans Cassiopeia, le template par défaut de Joomla 4.

Dans ce blog, je vais vous aider à maîtriser les concepts clés qui se cachent derrière CSS Grid.

Depuis l’annonce de Joomla concernant l’adoption de CSS Grid dans Joomla 4, de nombreux développeurs ont manifesté leur intérêt pour CSS Grid.

Dans un précédent article, nous avons abordé les bases du CSS Grid.

Dans cet article, nous allons examiner de plus près la propriété Autoflow de CSS Grid.