CSS/HTML

javascript

CSS Positionnement et modèle de boite

Lorsque vous positionnez des éléments en position relative, il faut faire attention au modèle de boite.

Soit les div de classe carre, il sont dans une autre div, et positionnés avec top et left.

        .carre {
            box-sizing: border-box;
            // box-sizing: content-box;
            position: relative;
            width: 100px;            height: 100px;
            background: blue;            border:red solid 1px;
        }

box-sizing : content-box

Ici on prend en compte l’épaisseur de la bordure pour détermine la position de l’élément suivant.

Ici est tenu compte de l’épaisseur des toutes les bordures (élément avant et après)

box-sizing:border-box

Ici on ne tient pas compte de l’épaisseur des bordures pour détermine la position de l’élément suivant

En faisant fi de l’épaisseur des bordure, le placement est beaucoup plus facile (pour pas dire possible)
javascript

Travailler avec la position de la souris ou des éléments en JS

La position de la souris

pageX, pageY

mouseevent.pageX et mouseevent.pageY représentent la position de la souris dans la page. La position 0 correspond au coin supérieur gauche de la page web.

Si vous scroller le document vers la droit de 200 pixel, et que la souris pointe à 100 pixel à droite du bord gauche du navigateur, pageX indiquera 300 au lieu de 100, donc ça tient compte du scrolling.

clientX, clientY

mouseevent.clientX et mouseevent.clientY représent la position de la souris par rapport à la fenêtre du navigateur seulement, et donc insensible au scrolling.

Position d’un élément getBoundingClientRect()

Cette méthode renvoit un obhet DOMRect, qui contient les information de position et de taille

element.getBoundingClientRect()
#affichage
{    bottom: 311 // sur axe Y,par rapport au bord haut de la page (origine point de vue)
     height: 100 // hauteur de l'élément
    left: 209 // sur axe X
    right: 309  // sur axe X
    top: 211 // sur axe Y
    width: 100 // largeur de l'élément
    x: 209
    y: 211
}

https://developer.mozilla.org/fr/docs/XPCOM_Interface_Reference/nsIDOMClientRect

element.offsetLeft

Renvoit le décalage horizontal en pixel de l’élément par rapport au parent (de coin supérieur gauche à coin supérieur gauche)

element.offsetTop

Renvoit le décalage vertical en pixel de l’élément par rapport au parent (de coin supérieur gauche à coin supérieur gauche)

CSS Grid introduction et tutoriel débutant

Aujourd’hui je vais vous présenter une technologie CSS émergence qu’on utilisera dans les années à venir pour faire du responsive design

La technologie s’appelle le CSS grid
Aujourd’hui pour faire du responsive design en a besoin d’un framework CSS
Le premier des frémoire CSS qui permet de faire du responsive design et bootstrap
Ensuite il y en a eu d’autres j’ai plus utilisé par exemple UIKIT et sémantiqueUI.

 

Mais le problème que je t’ai rencontré été que c’est vrai moi qui était en constante évolution, et passer de l’un à l’autre de ces framework était assez fastidieux, car j’ai utilisé pas la même syntaxe

Pourtant on peut faire du responsive design en CSS pure mais c’est assez fastidieux
il y a les media queries qui vous permettent de réaliser le responsive design.

Mais comme vous le savez le CSS c’est assez difficilement lisible.

 

Bien sûr il y a des solutions comme le sac que vous transpirer en CSS mais ce n’est pas encore la solution idéale

Sans parler que le CSS a beaucoup de hack il faut utiliser pour avoir le même design sur tout les navigateurs

Puis est apparu la technologie flexbox qui résout un peu le problème

Mais cette dernière technologie est unidimensionnel et notre page est à deux dimensions

C’est pour résoudre ses problèmes que le CSS grid a été inventé pour l’instant seulement Google Chrome et Firefox l’ont implémenté

Ce que vous devez savoir faire en natif en CSS

Je sais qu’il y a beaucoup de framework CSS géniaux, mais si vous ne connaissez pas les fondamentaux de CSS, alors vous serez toujours une burne en CSS, et ne comprendrez jamais les dysfonctionnement d’un framework CSS.

Voilà pourquoi il est important pour vous de connaitre les fondamentaux, il y a  encore quelques années coder en CSS pour que ça s’affiche pareil sur tous les navigateurs était un chemin de croix. Heureusement aujourd’hui il y a une meilleur harmonisation dans l’interprétation des recommandations du W3C chez les différents éditeur de navigateurs internet.

Choses qu’il faut savoir faire en CSS pure

-Menu drop down simulé, le drop down natif des navigateurs est assez moche

-Sticky footer, quand vous n’avez pas assez de contenu sur votre page, ça se voit

-centrer verticalement une div (bizutage en vue)

-utiliser les pseudo sélecteurs

-créer des flèches sur une bordure

-créer une popup et la positionner

-créer une fenêtre modale et l’enlever quand on clique n’importe où ailleurs

javascript

Premier pas avec le CSS Grid layout

Pourquoi le CSS Grid Layout?

Aujourd’hui pour faire du responsive design en a besoin d’un framework CSS

 

Le premier des framework CSS qui permet de faire du responsive design est bootstrap
Ensuite il y en a eu d’autres j’ai pu utilisé par exemple UIKIT et sémantiqueUI.

 

Mais le problème que je t’ai rencontré été que c’est vrai moi qui était en constante évolution, et passer de l’un à l’autre de ces framework était assez fastidieux, car j’ai utilisé pas la même syntaxe

Pourtant on peut faire du responsive design en CSS pure mais c’est assez fastidieux
il y a les media queries qui vous permettent de réaliser le responsive design.

Mais comme vous le savez le CSS c’est assez difficilement lisible.

Bien sûr il y a des solutions comme le SASS que vous transpilez en CSS mais ce n’est pas encore la solution idéale

Sans parler que le CSS a beaucoup de hacks qu’il faut utiliser pour avoir le même design sur tous les navigateurs

Puis est apparue la technologie flexbox qui résout un peu le problème

Mais cette dernière technologie est unidimensionnel et notre page est à deux dimensions

C’est pour résoudre ses problèmes que le CSS grid a été inventé pour l’instant seulement Google Chrome et Firefox l’ont implémenté

conception moderne de site, le responsive design pour adapter le site web aux différents formats d’écran

Une grille simple le minimum syndical

Une grille simple et responsive cette fois-ci

Le mieux est de combinaison de technologie afin d’avoir le mec plus ultra du design d’un site web. Ainsi en 2017 vous pouvez ne pas utiliser les framework CSS
Vous pouvez vous baser uniquement sur les technologies qui sont embarquées de façon native par les navigateurs web.

Retour en haut