Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #c
  • #cs
RSS: #css

#css

  • #css2.1
  • #css3-page
  • #css4
  • #css1k
  • #css-
  • #cssquery
  • #css_
  • #csszengarden
0 | ... | 75 | 100 | 125 | 150 | 175 | 200 | 225 | 250 | 275 | ... | 925
  • @booz
    BoOz @booz 21/03/2016
    1
    @baroug
    1

    Importing #CSS #Breakpoints Into #JavaScript | Lullabot
    ▻https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript

    Importing CSS Breakpoints Into JavaScript

    There are a lot of challenges within responsive web design, and one that that has constantly been a pain is triggering JavaScript based on the current CSS media query breakpoint. The problem is that the breakpoints are in CSS, which JavaScript has no native way to access. Many solutions (including window.matchMedia(), and Enquire.js) involve declaring your breakpoints in both CSS and JS, or require IE10+. The problem with these solutions is that when you change a breakpoint value, you have to change it twice. However, it doesn’t need to be like this.

    BoOz @booz
    Écrire un commentaire

  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 15/03/2016
    3
    @rastapopoulos
    @monolecte
    @mukt
    3

    Viewport Unit Based Typography
    ▻http://zellwk.com/blog/viewport-based-typography
    #viewport_units_typography_font-size_CSS_RWD

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 15/03/2016

      Excellent.
      CanIUse me dit 94% en France, c’est pas mal…

      Ça peut aussi servir à faire des blocs dont on est sûr qu’il font la hauteur de l’écran aussi (alors qu’on peut le faire avec height:100% uniquement si c’est à la racine ou si chaque parent à height indiqué…).

      #intégration #web #CSS #responsive #typographie #viewport

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 15/03/2016

      Attention, 100vh ne représente pas toujours la hauteur totale visible : ▻http://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-s

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 15/03/2016

      Arf, c’est ballot, merci de l’info. Après c’est plus ou moins critique (là dans ton cas pour faire du faux fullscreen, pour un truc qui DOIT être pile de la taille, ça l’est). Si c’est pour que avoir un grand bloc de la hauteur d’écran au-dessus de la ligne de flottaison, mais avec d’autres choses en scroll dessous, c’est moins grave.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 15/03/2016

      Exactement

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire

  • @robin
    robin @robin CC BY 9/03/2016
    4
    @fil
    @gastlag
    @lluc
    @b_b
    4

    Balloon.css — CSS tooltips for HTML elements
    ▻http://kazzkiq.github.io/balloon.css

    Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.

    robin @robin CC BY
    • @fil
      Fil @fil 9/03/2016

      https://dl.dropbox.com/s/ogbv1x2f7tddyxh/balloons-css.png?dl=0

      #css

      (excuse-moi j’ai une mémoire visuelle)

      Fil @fil
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 9/03/2016

      #intégration #web #HTML #tooltip #infobulle

      RastaPopoulos @rastapopoulos CC BY-NC
    • @robin
      robin @robin CC BY 10/03/2016

      Ne t’excuse pas hein, rajoute autant que tu veux c’est fait pour ça :)

      robin @robin CC BY
    Écrire un commentaire

  • @robin
    robin @robin CC BY 9/03/2016
    4
    @fil
    @spip
    @lluc
    @b_b
    4

    CSS only Responsive Tables – David Bushell – Web Design & Front-end Development (based in Manchester, UK)
    ▻http://dbushell.com/2016/03/04/css-only-responsive-tables

    Four years ago I shared an idea to make tabular data responsive. Browser support was experimental and the workarounds were extremely hacky. I revisited the technique this week, cleaned it up, and I am pleased to say all modern browsers work perfectly.

    robin @robin CC BY
    • @fil
      Fil @fil 9/03/2016

      http://dbushell.com/images/blog/responsive-table-flipped.png

      #css

      Fil @fil
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 9/03/2016

      #intégration #web #HTML #responsive #tableau

      RastaPopoulos @rastapopoulos CC BY-NC
    • @fil
      Fil @fil 9/03/2016

      Ça pourrait être en standard dans les css de #SPIP non ? Je ne vois pas de contre-indication…

      Fil @fil
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 9/03/2016

      Sur table.spip ? Possible oui (après on n’a pas de moyen de dire qu’on veut la version flip). Je pensais déjà au moins me l’ajouter à mon échafaudage Intégraal.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @robin
      robin @robin CC BY 10/03/2016

      Je pense qu’il n’y a pas de contre-indication, on utilise déjà un truc similaire (mais moins bien, je vais changer) sur par ex ►https://research.science.ai/article/on-the-marginal-cost-of-scholarly-communication et dans l’ensemble ça a l’air de rouler. On n’a aucun contrôle sur les tables donc c’est nécessaire.

      Je songeais à ajouter un bouton « Flip » (enfin ça en mieux grâce à notre designer) pour que les gens puissent réorienter eux-mêmes.

      robin @robin CC BY
    • @b_b
      b_b @b_b PUBLIC DOMAIN 10/03/2016
      @fil @rastapopoulos @tetue

      @fil @rastapopoulos on peut aussi proposer @tetue de l’intégrer dans #tinytypo ?

      b_b @b_b PUBLIC DOMAIN
    • @tetue
      tetue @tetue CC BY 10/03/2016

      Il y a plusieurs approches possibles pour rendre un tableau consultable en petites largeurs : la linéarisation (que j’ai préférée sur le site tinytypo.tetue.net et qui doit de toute façon rester possible pour une bonne accessibilité) ou celle ci-dessus, par exemple.

      Et plusieurs peuvent cohabiter, au sein d’un même site, en fonction du type de données tabulaires.

      Aucune ne m’a semblé suffisamment générique pour constituer une bonne approche par défaut, pouvant être incorporée à la base minimale qu’est Tiny Typo (ou à SPIP).

      Celle-ci est toutefois intéressante en ce qu’elle ne nécessite pas de div englobante, mais seulement l’apposition d’un sélecteur CSS sur l’élément table. À tester dans la vraie vie des sites.

      Cela peut être porté dans SPIP, sous la forme d’un plugin dédié, de façon à l’expérimenter d’abord, dans la vraie vie des sites. Puis l’incorporer ultérieurement si ça s’avère être une vraie bonne idée.

      tetue @tetue CC BY
    Écrire un commentaire

  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 3/03/2016

    Use rems for global sizing, use ems for local sizing
    ▻http://clagnut.com/blog/2384

    “The beauty of the em in CSS is that it provides a unit of length which relates directly to font size. Ems remain fundamental to modern web design. As you will see throughout this book, ems enable you to design truly scalable web pages, which is why we are introducing you to them before we go any further.”

    #em_rem_font-size_size_CSS_clevermarks_typography

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 3/03/2016

      #intégration #web #CSS #em #rem #taille #typographie

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 21/02/2016
    7
    @goom
    @fil
    @ze_dach
    @kent1
    @jeanmarie
    @mukt
    @rastapopoulos
    7

    GitHub - VPenkov/okayNav: The world’s okayest #responsive navigation
    ▻https://github.com/VPenkov/okayNav

    This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.

    https://raw.githubusercontent.com/VPenkov/okayNav/master/demo.gif

    #menu #jquery

    • #Github
    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 21/02/2016
      @fil

      COOL.

      Mais ça ne gère pas les sous-menus par contre. Ça sera pas mal d’arriver à coupler ça à un autre plugin (ou CSS) qui gérerait les sous-menus de manière accessibles (avec nav par clavier aussi) et responsive.

      #intégration #web #HTML #CSS #javascript cc @fil

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 21/02/2016

      Ah bah ya même un ticket d’amélioration pour ça déjà :
      ▻https://github.com/VPenkov/okayNav/issues/4

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 19/02/2016
    7
    @rastapopoulos
    @ze_dach
    @spip
    @robin
    @jeanmarie
    @monolecte
    @mukt
    7

    Flexbox Patterns
    ▻http://www.flexboxpatterns.com

    Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end, and you can start using them in your own code right away.

    #flexbox_Web_CSS_exemple_clevermarks

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 19/02/2016

      toujours chelou la génération auto des tags à partir du flux :)
      #flexbox #intégration #web #HTML #CSS #patterns #modèles

      Merci, j’apprends beaucoup mieux avec des exemples très précis comme ça.

      Est-ce qu’on sait comment ces modèles se déclinent quand on arrive sur un navigateur qui ne gère pas bien flexbox, ou pas la bonne version ? (parce que là le code contient juste le css « vanilla » officiel)

      J’aimerais bien utiliser pour de vrai Flexbox lors de ma prochaine intégration (qui doit se faire vers avril normalement) ! Mais je ne voudrais pas trop péter sur tel ou tel navigateur (sans aller à IE6 hein évidemment huhu).

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 19/02/2016

      Il y avait ça comme projet de liste de patterns flexbox aussi :
      ▻http://seenthis.net/messages/338835

      Mais il s’est arrêté à 6 cas… et ça n’a plus été mis à jour apparemment.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 19/02/2016
      @rastapopoulos

      @rastapopoulos les tags pourris, c’est parce que j’ai finalement jeté mon compte Diigo, qui ne servait de relai de ma source Pinboard que pour Seenthis. Si un jour Seenthis supporte les tags façon Pinboard, ce sera mieux. Cf ►http://seenthis.net/messages/324311

      Pour revenir au sujet : si tu utilises Autoprefixer, ça règle une bonne partie (voire tous ?) des problèmes de support dans les navigateurs un peu anciens qui utilisaient d’anciennes syntaxes.

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @fil
      Fil @fil 19/02/2016

      ben en fait c’est les tags de pinboard qui ne sont pas standards :) Mais si tu trouves le temps de faire une PR qui teste proprement qu’il s’agit de pinboard et qui éclate alors le tag, on prend

      Fil @fil
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 19/02/2016

      Oui pour les tags, on avait vu que c’est Pinboard qui ne respecte pas la norme DC. (et donc ça peut très bien être un tag ayant plusieurs mots, ça existe parfaitement, et seenthis ne devrait pas discriminer ça)

      Pour autoprefixer, je n’utilise pas encore, à appliquer après SCSS donc, mais ce n’est pas dans mon workflow pour l’instant (car je fais compiler les SCSS par SPIP, avec son Path). :(

      Mais sinon les préfixes suffisent ? IE8 a plus de 1% du parc encore… (entreprises, mairies, toussa). Bon mais là mon projet au printemps c’est pour le grand public, donc ça va. Ça serait bien de s’y mettre enfin !

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 19/02/2016
      @fil @rastapopoulos

      @fil je suis plutôt en mode allègement drastique de mes pet projects ces temps-ci (c’est très nécessaire), et clairement loin de tout code SPIP (et même PHP) depuis très longtemps, donc il y a objectivement peu de chance que je puisse proposer quoi que ce soit, désolé.

      @rastapopoulos je ne suis pas sûr que les préfixes suffisent, notamment Firefox a eu 3 implémentations différentes…

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 19/02/2016
      @nhoizey

      Et du coup toi tu l’utilises @nhoizey, ou tu l’as déjà utilisé ou fait utilisé sur un « vrai » projet ? (pro ou perso peu importe mais avec des vrais visiteurs à la fin)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 19/02/2016
      @rastapopoulos

      @rastapopoulos il y en a dans mon site perso et dans l’interface de mon jeu ►http://play.esviji.com notamment

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire

  • @rastapopoulos
    RastaPopoulos @rastapopoulos CC BY-NC 19/02/2016
    2
    @kent1
    @mukt
    2
    @notabene

    Des choix radios en faux-boutons, uniquement en CSS
    ▻http://notabene.github.io/accessibilitytests/hiddeninputs

    Une suite de tests pour trouver la meilleure solution, par @notabene. Qui apparemment en a trouvé une !

    C’est classe !

    #intégration #web #HTML #CSS #accessibilité

    RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @ze_dach
    ze_dach @ze_dach CC BY-NC-SA 17/02/2016

    The future of loading CSS - JakeArchibald.com
    ▻https://jakearchibald.com/2016/link-in-body

    Chrome is intending to change the behaviour of <link rel="stylesheet">, which will be noticeable when it appears within <body>. The impact and benefits of this aren’t clear from the blink-dev post, so I wanted to go into detail here.

    #CSS #HTML #Link #Body #Chrome #dev

    ze_dach @ze_dach CC BY-NC-SA
    Écrire un commentaire

  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 11/02/2016
    6
    @rastapopoulos
    @monolecte
    @b_b
    @booz
    @baroug
    @mukt
    6

    La technique des « Fab Four » pour créer des e‑mails responsive sans media queries – L’intégration d’e-mails
    ▻http://emails.hteumeuleu.fr/2016/02/fab-four-emails-responsive-sans-media-queries

    "Je pense avoir trouvé une nouvelle façon de créer des e‑mails responsive, sans media queries. La solution implique la fonction CSS calc(), et les trois propriétés width, min-width ou max-width. Ou comme je me plais à les appeler une fois toutes réu… Tags : #email #RWD #clevermarks

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/02/2016

      C’est excellent !
      ▻http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/the-fab-four.html

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/02/2016

      Mais du coup, la question : finalement ça peut s’utiliser dans un site normal aussi cette technique : ça fait un peu comme une Element Query, mais qui n’aurait qu’un seul breakpoint possible, non ? Du coup pour les cas où ça suffit d’avoir juste deux versions (petit/grand écran), alors on peut utiliser cette technique à la place de certaines media queries ! (Et c’est possiblement mieux puisque ça utilise la taille de l’élément parent, pas du périphérique complet : element query quoi.)

      #element_queries

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 11/02/2016

      Tout à fait !

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @fil
      Fil @fil 11/02/2016

      #j'ai_rien_compris

      Fil @fil
    • @monolecte
      Agnès Maillard @monolecte CC BY-NC-SA 12/02/2016

      #web_design #css

      Agnès Maillard @monolecte CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 12/02/2016
      @fil

      @fil ça se base sur la priorité des valeurs entre width, min-width et max-width. Suivant lequel est le plus grand ou plus petit, ce n’est pas le même qui va être réellement appliqué. Ça calcule une valeur de width qui est volontairement énorme mais soit positive (genre 38400) soit négative (-9600), du coup ce n’est jamais width qui est appliqué mais forcément soit min-width, soit max-width.

      Mais sinon tu peux juste te contenter de l’appliquer, ça marche ! :D

      Ça te permet de créer deux versions de taille (seulement deux, contrairement aux media queries où tu peux définir autant de variantes que tu veux) pour des blocs, mais suivant la taille du parent, et non pas suivant la taille du périphérique complet ! Donc c’est beaucoup plus précis (et ça marche en email du coup).

      Sinon les « element queries » sont une des propositions d’amélioration de CSS en pourparlers par le groupe de travail Responsive :
      ▻http://ricg.io

      RastaPopoulos @rastapopoulos CC BY-NC
    • @booz
      BoOz @booz 18/03/2016
      @baroug

      @baroug

      BoOz @booz
    Écrire un commentaire

  • @arno
    ARNO* @arno ART LIBRE 2/02/2016

    10up/flexibility: Use flexbox while supporting older Internet Explorers
    ▻https://github.com/10up/flexibility

    Use flexbox while supporting older Internet Explorers ▻https://10up.github.io/flexibility

    (pas encore essayé)

    ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016

      #flexbox #polyfill #intégration #web #CSS #javascript

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 29/01/2016
    6
    @fil
    @rastapopoulos
    @baroug
    @kent1
    @cy_altern
    @mukt
    6

    GitHub - andriussev/timelined : A customizable #css-only vertical #timeline
    ▻https://github.com/andriussev/timelined

    Timelined is a customizable CSS-only vertical timeline. Static Demo - ►http://timelined.betterexperience.site/demo.html

    • #Github
    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 29/01/2016

      #intégration #web #HTML #CSS #chronologie

      RastaPopoulos @rastapopoulos CC BY-NC
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 7/03/2017

      le lien vers la démo est maintenant : ►http://timelined.betterexperience.site/demo.html

      cy_altern @cy_altern CC BY-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 7/03/2017
      @cy_altern

      @cy_altern corrigé, merci :)

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @baroug
    baroug @baroug 21/01/2016
    2
    @kent1
    @monolecte
    2

    CodePen - Flexbox playgroung
    ▻http://codepen.io/enxaneta/full/adLPwv

    http://codepen.io/enxaneta/pen/adLPwv/image/large.png

    #web_design #code

    baroug @baroug
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 21/01/2016

      #intégration #web #CSS #flexbox

      RastaPopoulos @rastapopoulos CC BY-NC
    • @monolecte
      Agnès Maillard @monolecte CC BY-NC-SA 16/03/2016

      Je l’ai utilisé pour la refonte de mes thèmes et franchement, c’est bien puissant comme bousin !

      Agnès Maillard @monolecte CC BY-NC-SA
    Écrire un commentaire

  • @rastapopoulos
    RastaPopoulos @rastapopoulos CC BY-NC 12/01/2016
    2
    @fil
    @mukt
    2
    @fil

    FlexNav - A jQuery Plugin for Responsive Menus
    ▻http://jasonweaver.name/lab/flexiblenavigation

    Un menu responsive est pas trop mal accessible (en tout cas bien au clavier), qui s’adapte à l’écran, et qui marche aussi en tactile. Il est aussi sobre, sans styles envahissants, donc facile à personnaliser.
    via @fil

    #intégration #web #HTML #CSS #javascript #jquery #menu #navigation #responsive

    RastaPopoulos @rastapopoulos CC BY-NC
    • @fil
      Fil @fil 12/01/2016

      pas encore adopté : si vous trouvez mieux faites signe

      Fil @fil
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 12/01/2016

      par contre dans les options on peut pas désactiver complètement le hover, qui est une mauvaise pratique : rien ne doit s’ouvrir sans clics explicites, car bouger la souris c’est pas un choix

      bon après il sait utiliser hoverIntent, un autre plugin jquery, qui est moins pire, parce que ça attend avant de lancer l’action, histoire d’être sûr que la personne a vraiment mis la souris à tel endroit sans bouger exprès

      mais ça serait quand même mieux de pouvoir désactiver complètement, et qu’à la souris ça soit exactement comme en tactile : cliquer sur la flèche explicitement

      RastaPopoulos @rastapopoulos CC BY-NC
    • @fil
      Fil @fil 14/01/2016

      No Longer Maintained

      (que faire ?)

      Fil @fil
    • @fil
      Fil @fil 18/01/2016

      Ah tiens en voilà un super
      ▻http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu

      Fil @fil
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 18/01/2016

      Non,il est uniquement en CSS apparemment, et donc entre autre, il ne fonctionne pas au clavier. Que ce soit avec tabulation, ou avec Entrée+flèches, ya aucun moyen d’atteindre les sous-menus en clavier.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 2/02/2016
      @fil

      Ah peut-être qu’il y en a au moins un correct là @fil :
      ▻http://seenthis.net/messages/395433

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @erational
    erational @erational 10/01/2016
    9
    @spip
    @fil
    @monolecte
    @7h36
    @bystrano
    @supergeante
    @arno
    @vlentz
    @rjadot
    9

    #SPIP 3.1 dispo.

    Nous avons le plaisir de commencer l’année 2016 en lançant officiellement SPIP 3.1

    SPIP 3.1 est une version améliorée de SPIP 3.0, qui comprend une mise-à-jour des bibliothèques #JavaScript embarquées, un nouvel habillage graphique pour l’espace privé et les pages publiques et de nombreuses autres améliorations.

    SPIP 3.1 en bref

    – Ajout d’une fonction plein écran, vous permettant d’écrire et voir le résultat simultanément.
    – Mise à jour les librairies javascript dont #jQuery (passage à la version 1.11.3) et Jquery UI.
    – Mise à jour graphique du thème par défaut qui intègre la base minimale #CSS #TinyTypo (►http://tinytypo.tetue.net).
    – Mise à jour du thème graphique de l’espace privé.
    – Ajout du lecteur multimédia ►http://mediaelementjs.com par défaut pour la lecture des sons et vidéos.
    – Des statistiques améliorées.
    – Coté PHP, travail de normalisation, suppression de nombreux warnings et compatibilité accrue avec les dernières versions de #PHP, en particulier #PHP7.

    Lire le descriptif détaillé sur spip.net :
    ▻http://www.spip.net/fr_article5713.html

    Lire l’annonce complète sur le blog :
    ▻http://blog.spip.net/785

    erational @erational
    Écrire un commentaire

  • @baroug
    baroug @baroug 6/01/2016

    Swiss in CSS

    http://swissincss.com/images/thumb.jpg

    Swiss in #CSS is a homage to the International Typographic Style and the designers that pioneered the ideas behind the influential #design movement.

    All posters were recreated and animated with CSS by Jon Yablonski. Special thanks to Jordan O’Leary for dropping the Javascript wisdom.

    Share this Project on Twitter

    #web_design

    baroug @baroug
    • @simplicissimus
      Simplicissimus @simplicissimus 6/01/2016

      Avec le lien ?
      ►http://swissincss.com

      Simplicissimus @simplicissimus
    • @baroug
      baroug @baroug 6/01/2016

      ah merde je l’ai viré en pensant virer une scorie doublonnée…

      baroug @baroug
    Écrire un commentaire

  • @robin
    robin @robin CC BY 9/12/2015
    1
    @b_b
    1

    Quantity Queries for CSS · An A List Apart Article
    ▻http://alistapart.com/article/quantity-queries-for-css

    I wouldn’t do that to you, friends. This is your guide to creating style breakpoints for quantities of HTML elements, much as you already do with @media queries for viewport dimensions. I’m not pointing at some blurry specification in the distance or a twinkle in an implementer’s eye. We’re going to do this today, with CSS that’s already available.

    robin @robin CC BY
    • @b_b
      b_b @b_b PUBLIC DOMAIN 9/12/2015

      #css #media_queries

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 2/12/2015

    Seriously, use icon fonts | Ben Frain
    ▻http://benfrain.com/seriously-use-icon-fonts

    Je continue à privilégier #SVG tant que possible… Tags : #icone #fonte SVG #comparaison #clevermarks

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 2/12/2015

      C’est une réponse à cet article :
      ►http://seenthis.net/messages/433569

      #intégration #HTML #CSS

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 2/12/2015

       ;-)

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire

  • @baroug
    baroug @baroug 27/11/2015
    10
    @b_b
    @rastapopoulos
    @spip
    @nhoizey
    @monolecte
    @7h36
    @goom
    @mukt
    @gastlag
    10

    » Seriously, Don’t Use #Icon #Fonts Cloud Four Blog
    ▻http://blog.cloudfour.com/seriously-dont-use-icon-fonts

    http://blog.cloudfour.com/wp-content/uploads/2015/11/death_to_icon_fonts-slide_20.jpg

    Icons are everywhere. These “little miracle workers” (as John Hicks described them) help us reinforce meaning in the interfaces we design and build. Their popularity in web design has never been greater; the conciseness and versatility of pictograms in particular make them a lovely fit for displays large and small.

    But icons on the web have had their fair share of challenges. They were time-consuming to prepare for every intended display size and color. When high-resolution displays hit the market, icons looked particularly low-res and blocky compared to the text they often accompanied.

    So it’s really no wonder that icon fonts became such a hit. Icons displayed via @font-face were resolution-independent and customizable in all the ways we expected text to be. Sure, delivering icons as a typeface was definitely a hack, but it was also useful, versatile, and maybe even a little fun.

    But now we need to stop. It’s time to let icon fonts pass on to Hack Heaven, where they can frolic with table-based layouts, Bullet-Proof Rounded Corners and Scalable Inman Flash Replacements. Here’s why…

    #typo #icones #web_design

    baroug @baroug
    • @b_b
      b_b @b_b PUBLIC DOMAIN 27/11/2015

      L’article signale cette ressource intéressante pour les personnes qui utilisent ce genre de typos : ▻https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html

      b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 27/11/2015

      Résumé :

      – Quand on utilise la zone Unicode réservée aux trucs privés, si la fonte se charge mal, on a soit des rectangles pourris, soit des icônes n’ayant rien à voir (emojis, etc). Et si les utilisateurs (dyslexiques par ex) forcent une fonte propre à leur besoin, pareil, ça nique tout.

      – Quand on fait bien les choses et qu’on utilise le bon caractère Unicode correspondant au dessin que l’on veut utiliser : beaucoup de lecteurs d’écran lisent la description du dessin ! Et le seul moyen de l’enlever est d’ajouter du « aria » dans le HTML en plus. Cela peut marcher dans certains cas, mais du coup impossible d’ajouter des icônes uniquement en CSS, dans le thème graphique.

      Filament a produit une librairie utilitaire contenant CSS et JS nécessaire pour utiliser des fontes d’icônes de manière accessible :
      ▻https://github.com/filamentgroup/a-font-garde

      Mais dans la solution de Filament, dans TOUS les cas d’utilisations, ils demandent à utiliser du HTML supplémentaire spécifique à l’icône. Donc d’après moi, c’est un peu pourri : impossible de faire le choix des icônes (ou pas) uniquement dans le thème graphique…

      Sur le long terme, j’ai l’impression que la solution serait que tous les lecteurs d’écran prennent correctement en compte la propriété speak:none.
      De cette manière, il suffirait :
      1) d’utiliser un bon caractère unicode correspondant au mieux au dessin de chaque caractère de notre fonte d’icône (Fontello permet ça par ex), comme ça le fallback visuel serait bon (sauf s’il n’existe pas et dans ce cas faut utiliser la méthode fallback par image de Filament… galère)
      2) d’appliquer sur tous les :before où on veut ajouter une icône, la directive speak:none

      Mais actuellement même Caniuse.com ne contient pas les statistiques des propriétés orales de CSS… Il y a un ticket pour voter pour ça ici :
      ▻https://github.com/Fyrd/caniuse/issues/1515

      Voilà, comment est-ce que vous allez faire à l’avenir vous ?

      En ce qui me concerne, cela fait de nombreux mois que désormais mon HTML ne contient plus de scories pourries en rapport avec l’aspect graphique, que je n’utilise plus de classes genre « icon », « grid », ou je sais pas quelle merde comme ça, et que j’ajoute tout en CSS grâce aux préprocesseurs (exemple : a.super_lien{ @extend .icon; @extend .icon-super; }).
      Du coup la solution de Filament m’embête vraiment…

      #accessibilité #icônes #fontes #fonts #intégration #HTML #CSS

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 27/11/2015
      @notabene @nhoizey

      Et tiens cc @notabene @nhoizey pour intégration/accessibilité.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 27/11/2015
      @rastapopoulos

      Pour ma part, les pictos sont en SVG inline, tout simplement. Si je devais me préoccuper de fallback (je parle de mes projets perso uniquement), j’utiliserais <picture> avec une source SVG et le fallback en PNG.

      Merci @rastapopoulos pour le ping, je pensais l’avoir dans mes propres liens, mais ce n’est pas encore le cas…

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 27/11/2015

      Nan mais si c’est un truc avec des couleurs, etc, ben oui c’est une image, on l’utilise comme une image. Les icônes en fonte pour moi c’est clairement pour les pictogrammes : qui justement doivent suivre UNE couleur choisie en CSS (celle du texte courant très souvent, et parfois une autre), et à utiliser pour différencier des liens, des boutons, etc, tout en restant sobre.

      [ Éditer ] [ Supprimer ]
      versus
      [ ✎ Éditer ] [ ✖ Supprimer ]

      Et dans ces cas là, le fait d’en vouloir ou pas, et le fait de vouloir tels ou tels pictos : c’est un choix du thème graphique. Donc pour moi c’est entièrement au thème graphique de les activer ou pas, et de choisir quelles images ou pas. Sans RIEN changer au HTML (qui ne contient que des classes permettant de différencier le sens de divers liens par exemple, pas leur aspect : « supprimer », « favoris », « inscription », etc).

      Le fait de devoir mettre des <img> (ou même des <span> vides) dans le HTML pour afficher des icônes et non des vraies images, c’est totalement carrément plus du hack (comme il dit dans le lien de départ), qu’utiliser des fontes en CSS. Le fait d’avoir ces pictos, c’est une aide visuelle pour aider à mieux distinguer certains éléments pour celleux qui ont des yeux, mais le lien ou bouton lui c’est juste « Éditer » (par ex).

      Ah et faut ajouter (et ça a été écrit dans les commentaires) que les fontes informatiques, avec unicode, ont été faites pour contenir des lettres ET des pictos. Donc ce n’est absolument pas un hack du tout, c’est parfaitement prévu, et donc c’est aux navigateurs (visuels ET auditifs) et aux normes web (CSS), de savoir les gérer comme il faut.

      Après pour les interfaces où on a des liens ou boutons qui n’ont QUE l’image/picto, là c’est encore autre chose. Mais pour le coup ça pose encore plus de problème ergonomique avant même l’accessibilité : une image seule, tant qu’on ne connait pas l’appli ou le site, difficile de savoir à quoi ça mène (et maintenant dans tous les trucs tactiles on a pas de bulle de survol puisque pas de survol, mais même pour celleux qui ont une souris, ce n’est pas normal de devoir déplacer sa souris un peu partout sur l’écran pour savoir ce que fait l’interface !), donc sauf cas rare et très précis, c’est pour moi de toute façon une mauvaise pratique.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 27/11/2015

      Pourquoi les pictos devraient-ils n’avoir qu’une seule couleur ?

      (oui, je sais, les fontes multicolores arrivent…)

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 28/11/2015

      Pour ce point, Fontello fait déjà tout ça pour toi, comme IcoMoon mais en logiciel libre et gratuit. Tu peux importer tes SVG perso, puis les sélectionner comme caractères, et leur assigner un code unicode. Ensuite ça te génère la fonte dans plein de formats, et le CSS qui va avec (comme IcoMoon encore une fois).

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 2/12/2015

      Une réponse là ▻http://seenthis.net/messages/435520
      Mais qui ne prend pas en compte vraiment les problèmes d’accessibilité (juste utiliser le PUA ne suffit pas, puisqu’il y a le problème des fallbacks, et des polices forcées autrement). Or ce sont ces problèmes dont parlent en priorité l’article de départ.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016

      L’explication plus technique de comment ils fonctionnent chez Cloudfour :
      ▻http://seenthis.net/messages/457318

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @aurelie
    Aurélie @aurelie 23/11/2015

    Un p’tit labyrithe avec une balle qui cherche la sortie, en svg :-)
    #html #css #svg #épicétou

    ▻http://codepen.io/AurelieT/pen/yYrOgM

    Aurélie @aurelie
    Écrire un commentaire

  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 9/11/2015

    parker/docs/metrics at master · katiefenn/parker · GitHub
    ▻https://github.com/katiefenn/parker/tree/master/docs/metrics

    Parker has a suite of metrics that are useful for measuring stylesheets. What follows is a list of all the metrics that are bundled with Parker. Tags: #CSS complexité #analyse spécificité qualité #clevermarks

    #complexité #spécificité #qualité

    • #Github
    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire

  • @monolecte
    Agnès Maillard @monolecte CC BY-NC-SA 30/10/2015

    Centrer en #CSS, un guide complet
    ▻https://la-cascade.io/centrer-en-css-un-guide-complet

    Le centrage en CSS est souvent un casse-tête. Pourquoi faut-il que ce soit si difficile ? En fait, la difficulté ne vient pas du centrage lui-même mais de la multiplicité des techniques disponibles pour centrer en CSS et qui dépendent chacune de la situation. La vraie difficulté est donc de savoir quelle technique utiliser dans une situation donnée.

    Agnès Maillard @monolecte CC BY-NC-SA
    Écrire un commentaire

  • @robin
    robin @robin CC BY 29/10/2015
    3
    @habbon
    @b_b
    3

    localfont.com - Download fonts from googlefonts
    ▻http://www.localfont.com

    Download fonts from googlefonts

    Not sure how I’ve lived without this, ever.

    robin @robin CC BY
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 29/10/2015

      Euh… Google Fonts propose déjà le téléchargement… je ne comprends pas…

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @robin
      robin @robin CC BY 29/10/2015

      Il est tout pourri le téléchargement de GF, tu as juste la font.

      robin @robin CC BY
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 30/10/2015

      Tu as besoin de quoi d’autre ? ;-)

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @robin
      robin @robin CC BY 30/10/2015

      De la font dans tous ses formats, et le CSS qui va bien pour les importer ! Sinon il faut que je me refade les conversions via un truc comme FontSquirrel.

      Le problème de ce dernier, en dehors de produire du CSS qu’il faut rebidouiller, c’est aussi qu’il change les polices. J’ai essayé d’enlever toutes les options que j’ai pu, sans succès.

      Juste cliquer trois fois et avoir les polices en local, c’est nickel.

      robin @robin CC BY
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 30/10/2015

      Personnellement je passe justement systématiquement dans FontSquirrel pour optimiser mes fontes, donc nous n’avons pas les mêmes attentes… ;-)

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @robin
      robin @robin CC BY 30/10/2015

      C’est ce que je faisais avant, mais ce qui m’a justement fait découvrir localfont c’est que FS change les fonts (et que je n’ai pas réussi à le faire oublier cette idée. Notamment sur Open Sans j’avais un résultat absolument horrible comparé aux originaux, quelles que soient les préférences. Aussi, pour ce qui est servi depuis GF je n’ai pas trouvé de différence de taille majeure (sur les quelques polices que j’ai testées).

      robin @robin CC BY
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 30/10/2015

      Ok, je testerais donc quand même, à l’occasion… ;-)

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 30/10/2015

      #font #google #googlefonts #CSS #web #intégration

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 1/05/2016
      @fil

      down du coup il reste l’alternative pointée par @fil ici ▻http://seenthis.net/messages/325302

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @arno
    ARNO* @arno ART LIBRE 17/10/2015
    1
    @biggrizzly
    1

    Le cadeau d’Apple du matin : on vient de découvrir qu’ils ont cassé le sélecteur ~ dans les #CSS des webviews d’#IOS9. Chouette, maintenant que j’ai passé le plus d’interactions possibles en :checked~.kekchose, je suis bon pour tout refaire dans l’autre sens…

    ▻https://github.com/driftyco/ionic/issues/4347

    Seems to be a problem with tilde combinator (~).

    ARNO* @arno ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 19/10/2015

      Preparing for iOS 9 | The Official Ionic Blog
      ▻http://blog.ionic.io/preparing-for-ios-9

      These issues are not present in iOS Safari, so mobile websites built with Ionic will not break. They are also not present in WKWebView, the new web view environment in iOS.

      There is some good news here: Cordova will soon support WKWebView on iOS, which will bring some great performance and feature improvements to Cordova and Ionic apps.

      ARNO* @arno ART LIBRE
    • @biggrizzly
      BigGrizzly @biggrizzly CC BY-NC-SA 19/10/2015

      N’empêche que nos applications là, elles ne fonctionnent plus sur iOS9 et ça me casse les pieds. J’ai un client qui trouve ça tellement con ces régressions qu’il me demande de ne plus porter son application sur mobile... vu que l’application fonctionne sans soucis dans les navigateurs...

      BigGrizzly @biggrizzly CC BY-NC-SA
    • @arno
      ARNO* @arno ART LIBRE 5/01/2016

      Le plugin cordova-plugin-wkwebview-engine devrait corriger ça :
      ▻http://cordova.apache.org/news/2015/12/08/wkwebview-engine-plugin-release.html

      Mais attention :
      ▻https://issues.apache.org/jira/browse/CB-10237?jql=project%20%3D%20CB%20AND%20labels%20%3D%20wkwebview-know

      If your content src (the initial local file loaded in the webview) is in www/index.html, anything not under www will not load in the webview, even though it’s a file url.

      For example, if you have a file url to a file in the Documents folder.

      Et ça c’est super-lourd quand le site commence à être un peu compliqué.

      ARNO* @arno ART LIBRE
    Écrire un commentaire

  • @aurelie
    Aurélie @aurelie 14/10/2015

    Quand je réussis à faire un #merge et à résoudre des conflits toute seule comme une grande parce qu’on n’a plus notre #expert #git
    Wu, j’ai eu peur à un moment, quand j’ai vu réapparaître le #css que j’avais fait au début, mais ayééééé.... ma branche est synchro avec la #master !!...

    https://media.giphy.com/media/Ry3Yl9TQlUAxy/giphy.gif

    Aurélie @aurelie
    Écrire un commentaire

0 | ... | 75 | 100 | 125 | 150 | 175 | 200 | 225 | 250 | 275 | ... | 925

Thèmes liés

  • #css
  • #intégration
  • #web
  • #grid
  • #html
  • technology: html
  • #javascript
  • #html
  • #layout
  • #web-development
  • #webdesign
  • #flexbox
  • #responsive
  • programminglanguage: html
  • #ux
  • technology: html
  • #print
  • #css-grid
  • #spip
  • #web_design
  • #impression
  • #javascript
  • programminglanguage: javascript
  • company: css
  • #ergonomie
  • #front-end-development
  • #conception
  • #css3
  • #design
  • #javascript
  • company: safari
  • #graphisme
  • #typographie
  • #sass
  • #typo
  • #flex
  • #interface
  • #webdev
  • #block-element-modifier
  • #css3