Animating CSS Width and Height Without the Squish Effect • PQINA

Animer width et height en css sans se prendre la tête et plus rapidement avec transform.

Les animations de propriétés provoquent un reflow de la page alors que transform et opacity ne le font pas: c'est un point en leur faveur. Problème, si on étire une boîte arrondie (transform: scale), les coins se déforment alors que si on change la taille (width/height), les coins restent arrondis.

L'auteur propose une solution qui consiste à étirer tout sauf les coins en divisant l'élément en plusieurs divs... ça me rappelle l'époque où border-radius n'existait pas et qu'on faisait les coins arrondis en multipliant les divs avec des fonds... #teamVieux



Quoting in HTML: Quotations, Citations, and Blockquotes | CSS-Tricks

Bon article sur la façon d'afficher les citations en HTML.

Je retiens une façon de mettre l'apostrophe en retrait


/* Fallback */
blockquote {
  text-indent: -0.45em;
}

/ If there's support, erase the indent and use the property instead / @supports ( hanging-punctuation: first) { blockquote { text-indent: 0; hanging-punctuation: first; } }

“Stop Using CSS Selectors for Non-CSS”

Une réflexion intéressante que je garderai en mémoire: ne réserver les classes css que pour styler, pas pour cibler en js.
Donc en résumé, au lieu de


<article class="article"><br />
</article><br />
<br />
et <br />
<br />
$(".article") <br />
```<br />
<br />
Préférer:<br />
<br />
```<br />
<article class="article" data-hoverable><br />
</article><br />
<br />
et <br />
<br />
$("[data-hoverable]")<br />
```<br />
<br />
On sépare ainsi les classes (styling) des attributs data-* (scripting js)<br />
<br />
<br/><br/><div class="img_source"><a href="https://www.inetsolutions.org/wp-content/uploads/2016/03/JavaScript-And-CSS-Includes-Do-Overload-Googles-Fetch-And-Mobile-Testing-Tools-1030x644.jpg">Source image</a></div>

La class Brozeur !

Face aux problèmes de webdesign que posent certains navigateurs selon leurs versions, je vous ai déjà proposé plusieurs "solutions"  : les hacks que tout le monde connaît, charger une feuille de style spécifique au navigateur et détecter les supports mobiles...

Aujourd'hui, je vous propose une autre possibilité, que j'ai utilisée à maintes reprises pour cibler un navigateur ou une page spécifique dans les CSS.

(...)

Ca ne débordera plus dans le pre ! (jeu de mot navrant)

Combien de fois on peut se prendre le front ou se gratter le menton pendant des heures sans piger vraiment le pourquoi du comment des réactions de css...
Un peu comme si on n'avait pas le droit d'avoir les avantages d'une balise sans ses inconvénients .

La balise <pre> est de celles-là: servant surtout à présenter des portions de code dans le navigateur afin de les rendre plus lisibles, on se heurtait au problème de la ligne interminable qui dépasse au lieu de se couper proprement (saleté)

Voilà la solution et pis cross browser en plus.

(...)

Fil RSS des articles