Adobe is working on implementing :nth-letter() in Webkit: The desired syntax was :nth-letter(), where the argument would (ideally) take the same values that :nth-child() can (e.g, a simple index, even/odd, or an expression like 2n+4). This code: <p id=”sentence”>My fourth letter is awesome.</p> #sentence:nth-letter(3) { color: red; font-family: “Comic Sans MS”; font-size: 3em; font-weight: bold; …
Tag Archives: css
Photoshop Blend Modes coming to CSS
If you’re a user of our design applications such as Photoshop and Illustrator, you know how you can create very cool effects with blend modes. Last year, I joined the W3C and started contributing to the SVG and FX task forces. I am now spending the bulk of my time on editing, discussing and implementing …
Paperfold CSS
What’s the Deal With display: inline-block?
We’ve been using floats for layout pretty much since we left tables behind. It’s a quirky solution that can often cause troubles, but if you know what you’re doing, it works. One interesting alternative to floats that people are turning to more and more lately is to set the display value of an element to …
Continue reading “What’s the Deal With display: inline-block?”
text-indent: -9999px; revisited
Turns out, this works even better (and is more concise): .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } As Zeldman put it: Really long strings of text will never flow into the container because they always flow away from the container. Performance is dramatically improved because a 9999px box is not drawn. Noticeably so …
Least: Convert Regular CSS to LESS/Sass
Scaling With em Units
Recently I started testing how proportional scaling of bigger layouts would work in reality and if it makes any sense. It’s possible when using EM units and then changing body’s font-size when viewport’s height grows above certain point. Basically that means, that I have to change only one or two css properties between @media queries …
CSS calc() in Webkit
As mentioned before, CSS calc() was about to come to Chromium/Chrome (Webkit). Since about a week ago, the first part of the implementation has landed into the Canary builds: Adds calc expressions to CSSPrimitiveValue. This enables simple (ie no mixing of percents with numbers/lengths) expressions to be evaluated on most properties. No mixing yet, but …
Sass & Compass: The future of stylesheets now
CSS calc() in Chromium/Chrome
Three days ago this was committed: This is the parsing stage of calc. The expressions are evaluated and expression trees are generated. CSS values are not created yet – that will happen in a subsequent commit. Looking forward to the next commits, as this feature will make things — such as flexible columns with a …