Welcome - Polymer
http://polymer-project.appspot.com
Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.
#html #css #javascript #framework
Welcome - Polymer
http://polymer-project.appspot.com
Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.
#html #css #javascript #framework
Avoiding Unnecessary Paints - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints
Transitions CSS3 - Alsacréations
http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html
Animer les pages web uniquement à l’aide de styles CSS, sans apport de JavaScript : le module CSS3 Transitions
#animation #html5 #transition #css #css3
Et une bonne visualisation de la propriété timing-function
►http://css3.bradshawenterprises.com/transitions
« Automatic Figure Numbering with CSS Counters »
http://tympanus.net/codrops/2013/05/02/automatic-figure-numbering-with-css-counters
Dans le #html5, nouvel élément <figure> :
Basically, instead of adding your images this way:
<!— This is not good enough —>
<img src='http://static3.seenthis.net/cute-kitty.jpg' alt="This is a cute kitty!" />
… you can do something like this:
<!— This is good and semantic —>
<figure>
<img src='http://static3.seenthis.net/cute-kitty.jpg' alt="" />
<figcaption>This is a cute kitty!< / figcaption>
< / figure>
Et dans le #css, un compteur de <figure> :
We want to number our images so that they are prefixed by “Fig. 1 – …”, “Fig. 2 – …” and so on, right? Let’s do it simply.
.article {
counter-reset: figures;
}
.figure {
counter-increment: figures;
}
.figure figcaption:before {
content: ’Fig. ’ counter(figures) ’ - ’;
}
Those 3 lines of CSS are enough to number our figures automagically. Isn’t that awesome?
Figure et figcaption n’ont pas de balise de fermeture ?
si, bien vu : c’est seenthis qui enlève les / (je tente en ajoutant des espaces)
Merci, c’est pour mon confort intellectuel.
Particulièrement difficiles à styliser les figcaption, elles comprennent mal les widhts (ou c’est moi qui, encore une fois, n’a rien compris)
J’avais pas fait attention à 7h36 @7h36
Chaque matin, par email, une sélection de seenthis
http://listes.rezo.net/mailman/listinfo/7h36
Y’a des « clients » ?
Je ne connaissais pas. Les mails sont générés automatiquement ? Comment ?
Je veux pas cafter mais, oui, c’est accrédité par la maison. Les responsables n’ont qu’à se désigner à la vindicte populaire.
C’est un secret le amis ! faut surtout pas en parler, quoi. On peut compter sur votre discrétion ? :-p
Est-ce que 7h36 est le fameux projet du meilleur de seenthis ou je me trompe ?
Alors, comment c’est fabriqué ? Ce n’est pas désintéressé, je dois mettre en œuvre une newsletter pour @myeurop, donc je cherche des solutions qui vont bien.
Est-ce qu’il y a des pénalités de ponctualité ? J’ai reçu mon mail à 7h35 ! Scandaleux !
@monolecte pour la sélection il y a de la syndication et du script PHP ; pour la fabrication du mail il y a un squelette spécifique, et j’utilise #emogrifier pour passer les #CSS_inline ; ensuite un coup de cron pour envoyer le mail à la mailing-liste, qui elle-même est une des 600 listes de listes.rezo.net
Oui, je voyais un peu les choses comme ça. Par contre je ne connais pas emogrifier.
Et oui, même moi, j’ai une liste sur Rezo ;-).
Merci @fil
CSS Overflow Module Level 3
http://dev.w3.org/csswg/css-overflow
#css
CSS3 Click Chart | CSS3 Browser Support and Information
http://css3clickchart.com/#box-sizing
#css
C’est bien pratique.
Remarques :
– pointer-events est certes dans « cutting edge », mais je l’utilise déjà beaucoup pour désactiver des liens hypertextes par CSS :
pointer-events: none;
cursor: default;
c’est très pratique pour désactiver un lien vers la page dans laquelle on se trouve déjà (par exemple sur la page d’accueil, désactiver le lien vers la page d’accueil). Et ça se dégrade bien, puisqu’au pire on conserve le lien.
– hyphens, je l’utilise désormais systématiquement à la place des plugins de césure ; ça fonctionne bien, et ça se dégrade très bien, ça fonctionne très bien avec le responsive (puisqu’on peut décider de faire des césures sur certaines largeurs d’écran, et pas sur d’autres) pour moi c’est devenu systématique. Ah oui : penser à préciser la langue de la page (ou du bloc concerné, comme dans les citations de Seenthis).
– et enfin, comme toujours, pour ce genre de choses, j’utilise mon plugin « CSS imbriqués », qui permet de fabriquer directement tous les préfixes automatiquement, avec le préfixe -spip- :
-spip-transition: all 0.5s;
(dans certains cas, tels que les dégradés linéaires et les coins arrondis, le plugin calcule même des choses assez complexes automatiquement).
“List of Pseudo-Elements to Style Form Controls”
http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls
Styling form elements is a pain point when developing #web applications. Historically, web developers have had to accept the form controls the browser provided with little hope of customization. However, web rendering engines are increasingly adding hooks through pseudo-elements to give authors some control over the display.
While all of these #pseudo-elements are rendering engine specific (and therefore behind vendor prefixes), they can still be handy for customizing the display for that engine. The following is my best attempt at compiling a complete list of the pseudo-elements available in Trident, Gecko, and WebKit. At the time of this writing Blink is a recent fork of WebKit, so the pseudo-elements provided are identical. I am not aware of any form related pseudo-elements that Presto provides.
#css
PLTTS
http://pltts.me
With PLTTS [/ˈpælɨts/] it’s easy to find the matching color-palette for a project you are working on.
Très pratique pour les #daltoniens ça.
Le contraire de FESS your CSS (http://seenthis.net/messages/127057) : CSSCSS
http://zmoazeni.github.io/csscss
csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations
Via http://web-design-weekly.com/2013/04/14/web-design-weekly-84
#css
Improve #Mobile Support With Server-Side-Enhanced Responsive Design | Smashing Mobile
http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive
a responsive website is not automatically a mobile-friendly website. Amid the buzz of trendy Web development techniques, the good ol’ Web server doesn’t get the spotlight it deserves. Modern Web development should be about finding the right balance between server-side and client-side implementation.
1. Use Your #CMS
2. Use A #Device-Description Repository
3. Execute #CSS #Media_Queries Server-Side
4. Optimizing #Images
5. Pre-Processing and Intelligent Caching
http://media.smashingmagazine.com/wp-content/uploads/2012/12/smg-req.png
“Freeing the Floats of the Future From the Tyranny of the Rectangle”
http://blogs.adobe.com/webplatform/2013/03/27/freeing-the-floats-of-the-future-from-the-tyranny-of-the-rectangle
When an element is floated, inline content avoids the floated element. Content flows around the margin box of the element as defined by the CSS box model. The shape-outside CSS property allows you to tell the browser to use a specified shape instead of the margin box when wrapping content around the floating element.
https://blogs.adobe.com/webplatform/files/2013/03/grid_cssexclusions.png
#css
On se rapproche de la PAO
Pour mémoire, on peut faire un habillage irrégulier dans SPIP, de manière toutotomatique, depuis 2006 :
http://www.paris-beyrouth.org/tutoriaux-spip/article/un-habillage-irregulier-float
http://www.paris-beyrouth.org/IMG/jpg/habillage2.jpg
ah oui, j’avais vu la fonction il y a un bout de temps, mais jamais utilisée (rhoo)
pour accompagner le changement de #polatouche, un concours de slogans ? « Spip, le logiciel libre qui a 7 ans d’avance sur Adobe »
#spip_powa
en plus, Adobe propose des formes géométriques uniquement (triangle, rectangle, cercle, ovale)
Il me semble que quelqu’un avait tout de même fait un plugin pour empaqueter ça, de façon à utiliser directement un <imgXX|ragged> ou quelque chose dans le genre.
Sinon, plutôt que des images insérées dans le texte, je crois plus à tenter d’habiller avec des images qui sont largement hors du texte, et plutôt dans l’interface. C’est ce que j’avais fait là :
http://www.blog-mode.info/haute-couture/article/dany-atrache-004
Noter que, quand on scrolle, l’excellente bonne idée graphique devient un cauchemar pour la lecture, parce que les lignes se recomposent en permanence.
Mais dans une interface de type ebook, ça devrait être top-puissant.
Ben déjà est-ce qu’elle fait partie de l’API des images de SPIP (je ne sais plus) ? Ou d’un plugin supplémentaire.
Ce filtre est dans ce plugin :
http://contrib.spip.net/Un-habillage-irregulier
Et il y a aussi d’autres plugins qui rajoutent des choses à l’API, comme celui là :
http://contrib.spip.net/fonctions-d-images
Mais ce que je ne comprends pas, c’est que maintenant l’API des images est déjà sur la zone. Alors pourquoi continuer de créer des plugins supplémentaires plutôt que d’augmenter l’API d’origine ?
On pourrait tout regrouper ici, non ? À partir de la 3.1 en tout cas :
http://zone.spip.org/trac/spip-zone/browser/_core_/plugins/filtres_images
« Preview border-corner-shape, before implementations ! »
http://lea.verou.me/2013/03/preview-border-corner-shape-before-implementations
As an editor of the Backgrounds & Borders Level 4 spec, I am naturally a bit more interested in the cool features it will bring, once implementations start (it’s currently too early for that). One of the coolest features in it is border-corner-shape. While in Backgrounds & Borders 3, border-radius was only used for rounded (actually, elliptical) corners, with the help of border-corner-shape, it will be able to do so much more! Beveled corners, scoop-style corners (informally known as “negative border-radius”), even rectangular notches.
Et l’application en question
http://leaverou.github.com/border-corner-shape
http://lea.verou.me/wp-content/uploads/2013/03/Screen-Shot-2013-03-24-at-17.45.38-.png
#css
Quotes Rotator
http://tympanus.net/codrops/2013/03/29/quotes-rotator
An autoplay rotator for quotes (or any kind of content). An indicator above the content shows the progress. A blockquote with an image is used as an example. Also, an example media query shows how to resize the content for smaller screens.
Pourquoi je n’utilise pas les préprocesseurs CSS ?
Ils complexifient CSS
Ils n’ajoutent pas de fonctionnalités CSS aux CSS
Ils ne font pas (toujours) gagner de temps
Ils peuvent être dangereux pour le standard CSS (et provoquer une confusion)
►http://blog.iamvdo.me/post/45259636008/pourquoi-je-nutilise-pas-les-preprocesseurs-css
Voir aussi : http://blog.goetter.fr/post/46331150918/les-preprocesseurs-et-moi#_=_
Tout cela résume bien mon opinion sur le sujet.
Comment distinguer les écrans « grand », « petit » et « moyen » en #CSS ? Bah, c’est pas facile, mais voilà une astuce…
Responsive Web Design With Physical Units | Smashing #Mobile
http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units
Here’s the theory: In a combined query, if the ratio between the smaller of the width and height and the resolution, called a PSINET score, is higher than 5, then the result falls in the category of a physically large device. If the resulting number is lower than 5, then it is a physically small device. Devices that score very close to 5 are considered to be medium-sized.
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.
Cascade Framework
http://jslegers.github.com/cascadeframework/index.html
Also different from Twitter Bootstrap or other CSS Frameworks out there, Cascade Framework can be used for modern browsers and older browsers alike. All features of Cascade Framework support Internet Explorer from IE6 upwards or degrade gracefully.
#HTML5 #CSS #framework #JavaScript
Working Effectively with #less: Tips and #tools
http://www.hongkiat.com/blog/less-tips-tools
Tags: less #css tools
Pourquoi je n’utilise pas les préprocesseurs CSS ?
Vincent De Oliveira · Passionné de CSS
►http://blog.iamvdo.me/post/45259636008/pourquoi-je-nutilise-pas-les-preprocesseurs-css
#css
(Entre parenthèses et je suis d’accord, ce n’est point l’endroit pour, mais quelqu’un pourrait m’expliquer pourquoi #spipr et #bootstrap_pour_spip sont en #less ? J’ai passé quelques heures à installer #less via #brew sur mon Mac et maintenant il faut que je me coltine la doc de #less. Ce n’est pas évident.)
#css
Je suis d’accord avec sa conclusion
Je ne dis pas qu’il faut arrêter d’utiliser les préprocesseurs CSS, mais il faut être conscient de ce que cela implique. Vouloir à tout prix les mettre en place n’est pas toujours une bonne chose et peut devenir dangereux. Pas forcément pour vous, mais pour les autres, les non-experts, qui les utilisent sans savoir. Faites leur comprendre.
Je dirais même plus, toute surcouche joue en défaveur de l’apprentissage et pousse ceux qui ne courent pas assez vite vers la sortie. La coupe à celui qui technologise le plus (je sais ce verbe n’est pas encore indexé dans la base) c’est encore une histoire de la plus grosse et perso, ça me fatigue.
http://permalink.gmane.org/gmane.comp.web.spip.devel/64112
Bientôt on pourra effectivement choisir et glisser des blocs, mettre leur contenu dedans, les agencer dans la page, choisir le style, mais on aura (il me semble)
perdu la capacité de comprendre comment ça marche, seulement certaines personnes seront capables de programmer. Et même notre propre obsolescence sera programmée, parce qu’il y a toujours mieux et que pour suivre il faudrait rester river à son ordi.
@speciale, parce que spipr est basé sur bootstrap, et que bootstrap est développé en less. C’est pas un choix du ou des développeurs de ces plugins (le choix de less, pas celui de bootstrap).
@rastapopoulos Non, si je descends bootstrap j’ai les css tout court (ou j’hallucine ?). Less est une option, non ?
Tu le descends avec un Magnum ou avec un AK47 ? :)
Less n’est pas une option, Bootstrap est développé en less. Quand tu télécharges des CSS, c’est une version statique de ce qui a été compilé de Bootstrap suivant les cases cochées.
Ok, mais comment je fais pour faire ça avec spipr ? Je n’ai pas l’option de la version statique, capisci ? C’est ça que je voulais dire
Ensuite, si t’as un Magnum (vu que t’es dans le Bordelais), et tu ne sais pas quoi en faire, aboules-le ‡ ^]
Tu fais comment pour faire quoi « ça » ?
SPIPr utilise les vraies feuilles de styles de Bootstrap, qui sont en LESS. Donc les ajouts spécifiques à SPIPr sont eux-mêmes souvent en LESS (puisqu’ils inclus des morceaux de Bootstrap, mais ce n’est pas obligatoire, on peut aussi faire un thème sans LESS).
Et sinon, à part ça, c’est un plugin en statut « dev », sans support, et il ya la liste spip-zone pour en discuter. :)
How to lose weight in the browser
http://browserdiet.com
The definitive #front-end performance guide
CSS px is an Angular Measurement
http://inamidst.com/stuff/notes/csspx
The “px” unit in CSS doesn’t really have anything to do with screen pixels, despite the poorly chosen name. It’s actually an non-linear angular measurement. The formulæ to convert between radians and px are as follows:
radians = arctan(px/5376) 2
px = 5376 tan(radians/2)
Using this, you can work out the apparent angular widths of things in pixels quite easily. The moon from earth is about 24.3px wide, for example. The Eiffel Tower from a mile away is about 550.5px tall. That means that when you do “{ width: 24.3px }” in CSS 2.1, you’re making something as wide as the moon looks to be.
We’re trying a new way to teach and learn html/css/js. Basically, you just need to write HTML, CSS, Javascript code inside code editors and we’ll record whatever you type. Other people can then “playback” your recording in a video style and learn how you made your creation.
Exemples de tout ce qu’on peut faire avec
#html #css #javascript