Rechercher dans ce blog

Modernizr

Bibliothèque JavaScript qui permet de détecter les fonctionnalités HTML5, CSS, JS des navigateurs. On va pouvoir gérer ce qui dégrade notre site et proposer des alternatives.

Le site permet de sélectionner ce que l'on souhaite détecter. Par exemple, un background dégradé, flexbox, border, transformation CSS, vidéo html5, canvas.  C'est mieux de choisir le strict nécessaire en fonction de votre site. Si vous choisissez tout ce que propose Modernizr, cela risque de rendre votre site lourd pour rien du tout.
Après que vous ayez fini de sélectionner ce que vous souhaitez tester. Il suffira de copier-coller un code généré dans "BUILD" et de le mettre dans votre modernizr.js de votre dossier de travail.

Modernizr peut-également faire des tests personnalisables, tester le jquery, les medias queries etc...

Site : https://modernizr.com/
Doc : https://modernizr.com/docs

En gros pour résumer Modernize, va indiquer si les navigateurs prends en charges certaines fonctionnalités que vous utiliserez sur votre site tout en gardant une compatibilité sur d'anciens navigateurs.

Exemple :

Pré-processeur CSS

Pré-processeur CSS : langage source compilé pour être transposer dans un langage cible. Le but est de rendre plus flexible l'écriture CSS. Ce langage n'est pas compréhensible pour les navigateurs mais il sera compilé pour être réécrit en CSS. Il va générer dynamiquement des fichiers CSS.
On a Sass / Less etc..
On peut faire des déclarations imbriquées :

Une bonnes bases pour code

Pour faire son site il faut d'abord avoir un dossier de travail.

Exemple type de dossier que suggère Corinne Schillinger dans son livre "Intégration Web les bonnes pratiques".

Préparer votre dossier avec les éléments suivants :

Slide jquery avec bouton

Comment récupérer l'id 'un bouton au clic et d'afficher son contenu avec slide ?

Tout d'abord il vous faut commencer par le html.

On peut utiliser des <button> à la place des div.

ARIA

Mais qu'est-ce que c'est que ça ?

ARIA = (Applications Internet riches accessibles)

C'est très utile pour l'accessibilité.

Photoshop : Script / Action

Pour faire un script il suffit de suivre les étapes suivantes, c'est très simple.

Si vous n'avez pas un picto ressemblant à ceci :

Il faut que vous vous rendez au niveau du menu "Fenêtre".
Sélectionnez Script ou Action (ALT + F9).

Afficher les résultats d'une checkbox avec jQuery

Petit tuto sur l’évènement "click" de jquery sur des checkbox html.

J'utilise les méthodes suivantes :

on()
each()
push()
text()
join()

Modernizr

Bibliothèque JavaScript qui permet de détecter les fonctionnalités HTML5, CSS, JS des navigateurs. On va pouvoir gérer ce qui dégrade notre ...