Archives du mot-clé CSS:3

Thème du blog — valeurs générales

Initialement publié le 4 octobre 2006 à 10h44

 body { /* pour avoir un peu de marge dans le contraste, si nécessaire */
 /* Chiffres elzéviriens sur Lac et Windows. Chercher pour Linux */
 font-family:Hoefler Text, Georgia, serif; /* aérer le texte. OK avec Hoefler et Monaco, voir avec les autres (Georgia, Courier New, Linux) */;
 /* !!! vérifier ce que line-height à 1.5em donne avec Hoefler. En monaco, c’est mieux que 1.6em !!! */;
 line-height:1.6em max-width:49em /* « L’idal tourne entre 50 et 80 carac. par ligne » (50+80)2=65 65 carac. 98ex 49em */ }

flattr this!

CSS3 lists suggestions — better ways of styling the lists

Summary: I propose two new CSS rules.

  • Nested ordering (list-style:nested-decimal). Trigger is nested-. Before you go shouting about :before, read on.
  • Any character for unordered list (list-style:raw-✘). Trigger is raw- (with a bug as
  • (bonus track: a sort of bug, although it is not clear if it is spec- or browser-related)

Continuer la lecture de CSS3 lists suggestions — better ways of styling the lists

flattr this!


Initialement publié le 26 janvier 2005 à 09:28

Les instructions ci-dessous ne réduiront pas notablement la taille de vos CSS, mais elles assainissent le code en retirant ce qui n’est pas nécessaire et en harmonisant le reste. Il y a aussi quelques astuces (X)HTML très proches de l’esprit CSS.

Continuer la lecture de DietCSS

flattr this!

New CSS3 value: text-stroke (WebKit vendor extension)

A new vendor specification from WebKit: text-stroke. you won’t find it in CSS3 (yet), but this is a long-awaited function (at least by me). As someone said: Webkit is not only the basis for Safari, though, but an integral part of OS X. Typography has always been a strength of Mac OS…1

Surely this the reason they implemented those fancy fonts.

This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.
This property allows you to specify a stroke color for text. If it is not set, then the color property will be used to do the stroke.
This property allows you to specify the width of the stroke. It defaults to 0, meaning that only a fill is performed. You can specify a length for this value, and in addition the values thin, medium and thick can be used (with ‘thin’ being most like the outline behavior of OS X).
This property is a shorthand for the two stroke properties.
<div style="color:#906200;font-size:4em;text-shadow:5px 5px 10px #222;-webkit-text-stroke:5px black">This text has a black 3px stroke and a purple fill.</div>
This text has a black 3px stroke and a purple fill.

  1. If you are not convinced (or even if you are), take a look at Du bête RTF and Essayez de faire ça avec le bloc-notes. This is in French, but there is a lot of pictures.

flattr this!

Foreign words in italics

Une version plus complète, mais légèrement dépassée et plus brouillonne, est disponible en français.

Typography tells us foreign words shall be rendered as italic (here, we’re talking about real italics, not emphasis). The most common cases are, for me, Latin (Ultima ratio regum) or French (comme ceci) words. Ruling out span style or the marginally better span class, I will resort to selectors:

*:lang(en)	{font-style:italic}

(:lang for CSS2.1 and for CSS3)

This is all well and good, but it only works for English (we could refine by allowing dialects, like U.S., Canadian, Australian, British, Londonian…). German would still appear as normal (usually roman), not italic. There is another problem with reversing not being the same as italicising, but enkrat po enkrat (one thing at a time).

Introducing, from the CSS3 selectors department, the :not pseudo-class (browsers support) a.k.a. negation pseudoclass, easier for search engines). And that is very useful. :not allows to select in relation to something else; Instead of select French, Italian, Korean, German…, you now can say select what is not English.

So here is the code:

*:not(lang|(en)) {font-style:italic}

Voilà !

flattr this!

New Wording Draft for Generated Content for Paged Media

The CSS WG published a new Working Draft for Generated Content for Paged Media. This module describes features often used in printed publications leaders, cross-references, footnotes, endnotes, running headers and footers, hyphenation, etc.) Many features have had very little review so far and feedback is requested.

If you send comments, please send them to this mailing list,, and prefix the Subject with [css3-gcpm] (as I did on this message).

Here it is (this very version)

That is great, because I’m in the process of writing proofreading several books now.

Much like we may expect one page, whatever the medium, we may finally have hopes for one typesetting language, whatever the medium. Yes, I now LaTex is way better than CSS3 or even XSL:FO (including XSL/T if you consider table of contents).

flattr this!

Conflict between border-collapse and border-radius

Better to know it: border-collapse doesn’t work with border-radius. That makes sense when you think about it, but I had to stumble upon it to realise it.

flattr this!