#media-queries

(cet article est une traduction de ►http://fvsch.com/code/svg-icons/how-to)

Tout le nécessaire pour utiliser des SVG dans un site web, y compris :
- les méthode pour gérer l’accessibilité,
– la gestion des « vieux » navigateurs
– les astuces d’utilisation de CSS (pour modifs de taille et couleur par ex)
– des exemples d’utilisations des attributs fill et stroke
– les contournements des bogues connus des navigateurs

+ URL de SVGOMG (outil d’optimisation des fichiers SVG) : ▻https://jakearchibald.github.io/svgomg

Voir aussi ▻https://useiconic.com pour un ensemble d’icones SVG et outils/méthodes associés

Pour aller plus loin (et en particulier les animations, les 6 méthodes pour intégrer un SVG dans une page HTML, les bidouilles pour les rendre responsifs, les media-queries...)
voir : ▻https://la-cascade.io/svg-style-et-anime-avec-css

les librairies :
– SnapSVG : « The JavaScript SVG library for the modern web. » (ou « Snap.svg est à SVG ce que jQuery est à HTML, et il rend la vie avec SVG plus facile. ») : ►http://snapsvg.io
– Raphaël : « Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web » : ►http://dmitrybaranovskiy.github.io/raphael

et la compilation de références : ▻https://la-cascade.io/ressources/#svg

#icone #méthode #svg #web_design #SPIP #HTML5 #iconic #svgomg #outil #animation #raphaël #snapsvg #librairie #javascript #media-queries

#mobile #responsive

Let’s compare two media-query declarations:

@media (min-resolution: 341dpi) and (min-width: 767px) > {
}

and

@media (max-resolution: 131dpi) and (min-width: 767px) > {
}

At first glance, this doesn’t seem like much of a separation, right? Wrong. The numbers I’ve used are specific to the HTC Windows Phone 8X (the first snippet) and the iPad 2 (the second snippet). By using the resolution query, one can basically separate physically small devices from large devices.

ah ouais !

Testé sur mobile, c’est nickel !

Beau travail @seenthis, vous avez bien mérité vingt minutes de sommeil.

Quel travail ; bravo et merci !

ah #seenthisbug : auteurs / me suggérer des contacts

+1000, #seenthis_ça_roxxe
J’attends un petit peu que la peinture sèche avant de remonter (d’éventuels et légers) soucis :)

Sous Android 4.1 avec le brouteur standard la barre de recherche/login saute, cad elle se met bien en bas de l’écran mais quand on fait bouger le contenu vers le haut, la barre bouge avec avant de se remettre à sa place en bas de l’écran. Même chose quand on pousse la page vers le bas, mais là c’est moins gênant.

Ah oui, mon dernier « billet » est hyper-chiant, car il est tellement long et ennuyeux, on peut « scroller » pendant des minutest avant d’arriver à sa fin. Une fonction pour plier/déplier des messages longs serait la bienvenue.

Par contre c’est super la navigation en bas de l’écran une fois qu’on est connecté. Chapeau !

Sous Google Chrome pour Android le problème avec la barre de recherche/login sautillante ne se produit pas.

Je continue avec mon Google Nexus S /Android 4.1 :
Und fois connectė une surface grise se glisse par des su l’ėcran quand on scrolle. Elle saure vers le bas pour faire Palace au comtenu et à als Barre de navigatio (Google Chrome).
Ecrire des commentaires marche trres bien - si seulement Chrome n’essayait pas de corriger mes « Fa Utes » pour en rajouter d’énormes erreurs.

Encore sous Android, cette fois avec Firefox mobile c’est encore mieux. Quand on est connecté c’est quasiment parfait, on peut scroller à n’importe quelle vitesse, pas de surface grise ou noire provoquée par le trop rapide mouvement. Quand on n’est pas connecté par contre l’effet est présent sous une forme légèrement différente que dans Chrome et le brouteur Android.

Zut, mon Firefox sous Android vient de crasher, il n’y a même pas de capture d’écran dans le menu Android des derniers apps utilisées comme il y a d’habitude.

Avant je venais de remarquer qu’on peut se connecter mais que le dialogue est pénible à remplir sous tous les brouteurs car il disparait sous le clavier virtuel.

Bonne nuit et félicitations pour cette beta impressionnante. C’est pleinement utilisable !

Sous Android, je ne peux pas me connecter. Le pop up de connexion entre en conflit avec le clavier virtuel quand je veux taper le mot de passe.

Sous itrucmachinmininanopad c est tout simplement extra !

Je pense faire une page séparée de connexion, parce que de toute façon ça pose beaucoup de difficultés :
– code pourri pour gérer les erreurs en Ajax (pas dément),
– dépliage qui semble déconner (même sur PC) sur certains brouteurs,
– confusion ergonomique avec l’inscription,
– espace drôlement rikiki.

@monolecte Tu peux te connecter sous Android en faisant glisser le dialogue de connexion vers le haut pour le faire réapparaître.

si je perçois bien les choses, ça veut dire qu’on a plus la possibilité quand on dézoome une page de rétrécir la police en même temps ?

Si vous forcez le rechargement des CSS, il y a une foule de petits détails qui ont été changés. Notamment à destination des très petits écrans (éviter les colonnes de texte trop étroites).

Ben oui, mais j’ai un gros nécran avec une colonne perdue au milieu !

Ça a l’air mieux qu’avant sur Nokia S40 et Opera Mini en tt cas, merci !

iPad : excellent affichage en mode vertical ; mais le clic sur l’étoile reste délicat

iPad : difficile aussi de trouver le bouton « modifier » sur les messages ; le shift-return n’est pas pris en compte (j’ai un clavier externe)

@fil : oui, ça c’est pas du tout traité : virer un certain nombre de trucs masqués qui apparaissent au survol, vu que c’est assez bloquant en interface tactile.

Pour ceux qui s’y interessent j’ai trouvé ces points de cassure là dans les css de Seenthis

/ Media queries - points de cassure Seenthis /

/ Moins large que 1000px (devices et navigateurs) /
@media all and (max-width : 1000px){

}

@media all and (max-width : 900px){

}

@media all and (min-width : 780px) and (max-width : 1000px){
}

@media all and (max-width : 680px){

}

@media all and (max-width : 500px){

}

/ Mobile portraits et paysages /
@media all and (max-width : 400px){

}

Et comme d’habitude il faut un fix pour IE, le voici :

►https://github.com/paulirish/matchMedia.js

Une fourberie pour faire la même chose à coup de css + jQuery :

Rather than the measuring the screen width on resize of the window, I check for a css rule that is changed by the media query. This way, regardless of the how the browser treats the scrollbar, the media query will fire at the same time.

▻https://www.fourfront.us/blog/jquery-window-width-and-media-queries

Intéressant.

Truc à prendre en compte aussi désormais : la télé est désormais un écran d’excellente qualité, de définition 1920x1080, mais qu’on regarde depuis une distance de plusieurs mètres. Va falloir penser aux bons media-queries là aussi.

D’excellente qualité… pas forcément.

ah oui super, ca peut intéresser @baroug même si lui c pas la grid 12 mais la 16 qu’il utilise.

Salut @BoOz,
Tu as aussi ►http://html5boilerplate.com/mobile , très complet, à expurger selon les besoins.

#css #mobile