Inclure jQuery de manière optimisée. jQuery est un framework JavaScript très célèbre, permettant en quelques lignes de code de dynamiser un site web, de créer de petites animations, des interactions avec les formulaires, de programmer des appels Ajax. Voici, en détails, quelques possibilités d'intégration à votre site, afin de minimiser l'impact sur les performances et le temps de chargement. Appel classique à la librairie (fichier téléchargé) De la manière la plus basique, il est vous est proposé sur le site jQuery.com de télécharger le fichier - en affichant son code source - et de le placer sur votre site, par exemple dans jquery.js ou jquery-1.x.x.min.js.
Fichier et compression Vous récupérerez ainsi une version "minifiée", c'est à dire compressée jusqu'à un certain niveau par un algorithme supprimant espace et commentaires, mais rendant peu lisible la déclaration des fonctions. Voyez les différences entre la version non minifiée et la version minifiée. Performances au chargement Vous obtiendrez ainsi : <! <! Démo. Un menu déroulant adapté aux mobiles. La percée des terminaux mobiles tels que smartphones et tablettes impose de nouvelles règles en terme d'ergonomie et de webdesign spécifiques aux écrans de taille réduite.
Les menus de navigation déroulants posent de nombreux problèmes d'accessibilité dans des conditions d'usage "classique", et ceux-ci se voient décuplés dans le monde du Web mobile où la navigation verticale est à privilégier (l'affichage sous forme de colonnes côte à côte doit être prohibé sur de petits écrans). La technologie CSS3 des Media Queries va permettre de réaliser une intégration adaptée aux écrans de petite taille en détectant deux largeurs que nous aurons définies par avance, en amont du projet (ici "moins de 1000 pixels" et "moins de 540 pixels"). En action ! Voici ci-dessous les captures d'écran des différents états du menu selon les tailles d'écran respectives.
Menu "classique" (écrans de plus de 1000px) : Menu sur écrans réduits (automatiquement déployé) : Menu en version mobile (déployé sur une colonne) : Menu déroulant HTML/CSS dropdown menu - Media queries. Description Menu média queries contenant un sous niveau. Utilisation des média queries pour réussir une intégration sur smartphone. Accessible avec la touche tab, si javascript est activé. Si JS n'est pas activé le menu prend sa forme dépliée. Télécharger cette exemple (3ko) Code Html <nav id="navigation" role="navigation"><ul id="menu" role="menubar"><li><a href="#"><span>Blog</span></a></li><li class="sub"><a href="#"><span>Features</span></a><ul><li><a href="#"><span>Sub cat 1</span></a></li><li><a href="#" class="current"><span>Sub cat 2</span></a></li><li><a href="#"><span>Sub cat 3</span></a></li></ul></li><li><a href="#" class="current"><span>Services</span></a></li><li class="sub"><a href="#"><span>Archives</span></a><ul><li><a href="#"><span>Sub 1</span></a></li><li><a href="#"><span>Sub 2</span></a></li></ul></li><li><a href="#"><span>Contact</span></a></li></ul></nav> Javascript Lorsque javascript est activé, alors un attribut class="drop" est ajouté à ul#menu.
Média queries Contact. Sélectionner les frères d'un élément en CSS. Également appelés les "combinateurs d'adjacence", ces sélecteurs avancés permettent de cibler des éléments proches d'un autre élément. Il existe à l'heure actuelle deux sélecteurs de ce type : le combinateur d'adjacence directe, et le combinateur d'adjance indirecte.
Le sélecteur d'adjacence directe Le sélecteur d’adjacence directe est compatible avec quasiment tous les navigateurs. La prise en charge de ce sélecteur est intéressante, puisque Firefox 1+, Safari 1.3+, Opera 9.2+, Chrome 2.0+ et IE7+ comprennent ce sélecteur. Petite nuance pour Safari qui a un problème d'interprétation lorsqu'on cible le frère d'un élément en hover jusqu'à la version 5. De même pour IE7, ne laissez pas trainer un commentaire HTML entre les deux éléments sinon le sélecteur ne fonctionnera pas. Vous pouvez donc vous lâcher et l'utiliser dans vos intégrations. Syntaxe de base Pour cibler le frère d'un élément, nous allons avoir besoin du symbole +. Element1 + element2 { } Quelques exemples d'utilisation Exemple. Sélecteur d’adjacence indirecte en CSS3. Cet article a 2 années. Il commence à dater, lisez-le donc en gardant son âge en tête !
Merci publié le Lu 8 841 fois. Le sélecteur d’adjacence indirecte est peu connu en CSS. Arrivé avec la nouvelle mouture CSS3, ce sélecteur vous permet de sélectionner d’un seul coup tous les frères d’un élément ciblé répondant à un sélecteur précis. Voyons voir avec quelques exemples comment l’utiliser et quels sont ses effets. Syntaxe de base Le sélecteur, que j’appelle incorrectement siblings du fait de sa ressemblance avec la fonction siblings() de jQuery, utilise le caractère ~ disponible sous PC depuis les touches Alt Gr + 2(é ~). Ici les styles seront appliqués à tous les element2 frères de element1, même si un autre frère vient se mêler entre deux element2, par exemple. Voir la démo Il est important de noter que ce sélecteur ne cible que les frères suivants d’un élément. Quelques exemples d’utilisations Cibler les frères non identiques à l’élément de départ Ou avec le deuxième exemple : Euh… ça va ?