Même si elle offre une grande souplesse en matière de création de sites internet, la mise en page web par CSS est tout de même une tâche assez délicate à réaliser. Ce pour de nombreuses raisons, notamment en matière de sécurité web. Heureusement pour les développeurs et les webdesigners, il y a le module CSS Grid Layout ou grilles de mise en page qui devrait faciliter leur travail pour concevoir des pages web.

Le CSS Grid Layout, c’est quoi ?

CSS Grid Layout est un récent module de positionnement CSS. Son but est de permettre la créer des pages à l’aide d’un réseau bidimensionnel et de réduire la complexité de la conception des interfaces utilisateurs basées sur les grilles.

Afin d’y parvenir, ce module divise l’espace d’affichage en différentes régions utilisables par une application. Ou bien il définit des relations de taille, de position et d’empilement entre les éléments HTML.

Cela offre aux experts en webdesign d’une agence web de nouvelles possibilités dans le design des sites. Cet outil incroyablement puissant est fait d’ailleurs déjà l’unanimité auprès de nombreux expert. Beaucoup le considère comme le meilleur module de positionnement CSS disponible et le futur de la mise en page CSS.

Compatibilité de CSS Grid Layout avec les navigateurs web

Depuis le 28 mars 2017, le CSS Grid Layout est totalement supporté par les versions pour ordinateur des navigateurs web :

• Firefox à partir de la version 52,
• Chrome à partir de la v57,
• Safari à partir de la version 10.1,
• Opera à partir de la v44,
• Microsoft Edge à partir de la v16.

Quant à Internet Explorer, la version 11 inclut le support de ce module. Toutefois, il s’agit d’une ancienne implémentation dotée d’une syntaxe obsolète.

Concernant les navigateurs pour appareil mobile, les versions Safari Mobile à partir de la v10.3, Android à compter de la v56, Android Chrome à partir de la v59 et Android Firefox depuis la v55 intègrent aussi le support du CSS Grid Layout. Ce qui n’est pas encore le cas pour les deux navigateurs Opera Mobile et Opera Mini.

Comment tirer profit du CSS Grid ?

Si vous êtes un habitué des mises en page CSS, vous devez connaître les modèles Box et son amélioration Flexbox. Vous serez en plus ravi d’apprendre que ces deux derniers sont tout à fait complémentaires avec Grid. Il est ainsi plus aisé d’inclure un module de positionnement Grid dans une zone assez spécifique de votre site internet.

De cette façon, CSS Grid Layout peut devenir un outil pour améliorer vos galeries photo, ou encore dans le cadre de l’élaboration d’une interface utilisateur en responsive design. Il est ensuite possible d’avoir recours à des media queries ou requêtes média, pour remplir les grilles de manière dynamique.

Pour les développeurs amateurs, il est assez aisé de se lancer et utiliser CSS Grid. En plus, il existe de nombreux tutoriels sur le net pour mieux le maîtriser. Mais si vous envisagez la création d’un site internet et que vous êtes intéressé par l’utilisation de ce module de mise en page pour votre interface utilisateur, il est plus intéressant d’avoir aux recours aux services de spécialistes. À l’instar d’une agence web offshore comme Softibox qui dispose d’une équipe d’intégrateurs front-end expérimentés.

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

The post Le CSS Grid Layout, un module puissant pour vos mises en page appeared first on Softiblog.

Pris mot à mot, Leech = sangsue et Block eh bien c’est block, comme la porte est bloquée. Donc, le but du plug-in est de bloquer les sangsues, mais cela n’a pas de sens, enfin! Les sangsues en questions en fait, ce sont les sites qui vous sucent votre précieux temps; des sites addictifs comprenant les réseaux sociaux pour les jeunes, les sites de mode pour madame et pour ces messieurs … on se passera des détails

Pour utiliser leechblock sur un PC, il suffit de l’ajouter à Firefox en tapant Leechblock pour Firefox ou directement via ce lien Une fois le plug-in installé, la configuration peut être personnalisée à souhait. Pour ce faire, aller dans
Outils -> Leechblock -> Options

Pour définir les sites à bloquer, dans l’onglet « What to block » on peut soit coller une liste préalablement préparée sous .txt, soit saisir au fur et à mesure les URL que l’on désire bloquer. Leechblock propose 6 onglets différents qui peuvent chacun contenir une liste différente, des onglets qu’on peut renommer.

Dans le volet « When to block » ou en cliquant sur « next » plus bas de la page ; on peut spécifier la fourchette horaire dans la journée ou le site ne doit pas être accessible
entre 0000-0024 si c’est toute la journée ou 0009-1200,1400-1700 si on ne veut bloquer le site qu’entre 09h et 12h et 14h à 17h.
Plus bas, on peut aussi définir les jours ou le site doit être bloqué, il suffit de cocher le jour ou on veut bloquer et laisser vide les jours ou l’accès peut être libéré

Dans le volet « How to block » ou en cliquant sur « next » plus bas dans la page; on définit l’action qu’on veut faire par rapport à la liste de site que l’on vient d’insérer.

1- Default page: chrome://leechblock/locale/blocked.html
La page qui sera affichée sera la page par défaut définie par Leechblock

2- Delaying page : chrome://leechblock/locale/delayed.html
Servira quand dans les options on aura choisi de libérer le blocage après un temps défini. Pour définir ce temps, il faut mettre un chiffre dans la case vide dans la phrase ci-dessous
« Delay access to sites by — seconds when delaying page is used »

3- Blank page : La page qui s’affichera sera juste une page blanche

4- Homepage : La page qui s’affichera sera la page que vous aurez définie dans la case au-dessus

Une fois tout cela défini, on peut cliquer sur OK et on peut commencer à tester si les options choisies sont respectées.

Si vous ne voulez pas qu’on touche aux options que vous avez prédéfinies, dans l’onglet Access Control, vous pouvez intégrer un mot de passe. Il faudra alors connaître ce mot de passe pour pouvoir afficher les options de blocages que vous aurez définies

The post Tout sur leechblock, plug-in Firefox pour contrôler les sites visités appeared first on Softiblog.