WINDEV NOUVELLE VERSION 2024

CSS GRID / GRILLE CSS 789 N o u v e a u t é W D W B WM CSS GRID : UN SYSTÈME DE MISE EN PAGE BI-DIRECTIONNEL Une Grille CSS (appelé CSS Grid en anglais) est un concept de po- sitionnement des champs dans une page. Le positionnement s’effectue dans des cellules en ligne et en co- lonne. Les cellules contiennent les champs. Pour comparer à Flexbox: • Flexbox est unidirectionnel, horizontal OU vertical • CSS Grid est bidirectionnel, horizontal ET vertical. CSS Grid s’utilise soit pour la page entière, soit pour une partie de la page. Il est possible d’inclure une ou des grilles dans une Grille CSS et également une ou des Flexbox dans une Grille CSS. Gain apporté par la nouveauté 2024 : Pour une mise en page flexible 790 N o u v e a u t é W D W B WM CSS GRID : DÉCRIRE LES PROPRIÉTÉS Une grille CSS se décrit par de nombreuses propriétés: • nombre de lignes • nombre de colonnes • taille de la ligne (ou de la colonne): fixe, pourcentage, fraction de la taille disponible • nombre d’emplacements occupés par un champ dans la grille • justification horizontale et verticale au sein d’une cellule • gouttière • et toutes les propriétés CSS des grilles. Gain apporté par la nouveauté 2024: Définition facilitée 791 N o u v e a u t é W D W B WM NOUVEAU CHAMP GRILLE CSS La définition des propriétés du nouveau champ Grille CSS s’effectue grâce à la technologie des 7 onglets pour les propriétés courantes. Une zone permet de saisir du code CSS personnalisé. Gain apporté par la nouveauté 2024 : Un nouveau champ fondamental 792 N o u v e a u t é W D W B WM POSITIONNEMENT FLUIDE: GRILLE CSS ET FLEXBOX SONT LES MEILLEURS AMIS La création d’une page Responsive avec WEBDEV s’effectue en utili- sant soit la technologie des agencements, soit conjointement Grille CSS et Flexbox. Gain apporté par la nouveauté 2024 : Vous avez le choix NOUVEAU CHAMP POSITIONNEMENT PAR CSS GRID (GRILLE CSS) Selon la taille d’affichage, la disposition et la présence de blocs se modifient selon les règles que vous avez définies Ici par exemple, le bloc violet n’est plus affiché lorsque la taille diminue 79 L e s n o u v e a u t é s W I ND E V 2 0 2 4 WE B D E V 2 0 2 4 W I ND E V Mo b i l e 2 0 2 4