Fun with CSS
How to import style sheets based on a media query. This will be very useful later on.
CSS, Mobile | Permalink
CSS elsewhere on the 'Net.
20 September 2009
How to import style sheets based on a media query. This will be very useful later on.
CSS, Mobile | Permalink
23 May 2009
Zeldman gives a useful overview of where we stand with regards to web fonts.
CSS | Permalink
21 May 2009
Andy Clarke discusses possible solutions to the IE6 problem, and then highlights his own: create one Universal Internet Explorer 6 CSS file that will give any page a nice-but-basic typography and margins, but no layout or grid at all.
Interesting idea. We'll have to see what clients want (or whether they'll notice), but it sounds like an excellent intermediate solution between "don't bother with IE6" and "make IE6's rendering pixel-perfect".
CSS, IE, Theory | Permalink
11 March 2009
Steve Souders investigates how CSS selectors affect browser performance. His tests tried several common selectors on a large, but not extremely large, HTML page.
Interestingly, IE7 is the fastest browser here, while IE8 and FF3.1b vie for the position of the slowest.
CSS | Permalink
16 February 2009
Nicole Sullivan is not happy with the recent spate of CSS criticism, and argues that those who criticise just don't understand CSS well enough. My experience whispers she's right.
The really interesting point about the latest CSS flap is that there are apparently people who are not really interested in web design but are nonetheless forced to learn CSS. That, in turn, is apparently because their employer has decided they need this skill, which means that the demand for skilled CSS-ers is growing.
All in all I think this is good news for the standards-aware web community. In fact, I think we'll see such anti-CSS wars regularly from now on, and that every one happens because several thousand new people are (forced to be) learning CSS.
CSS | Permalink
12 February 2009
Yes! Yes! Yes! Give us selector blocks!
Instead of this
body.home #content .entry h2,
body.home #content .entry h3,
body.home #content .entry h4,
body.home #content .entry h5,
body.home #content .entry h6 {...}
we should be able to use this
body.home #content .entry {
h2, h3, h4, h5, h6 {...}
}
Give us selector blocks or death!
CSS | Permalink
11 February 2009
About using the <html> and <body> tags as normal block-level elements, and what goes wrong in the various browsers.
CSS | Permalink
19 January 2009
Excellent overview of CSS3 feedback given by web developers. Kudos to fantasai for doing this much work.
CSS | Permalink
9 October 2008
Dave Shea said what I've been thinking for months: with all browsers (except Chrome) supporting page zoom, there's no more need for CSS techniques revolving around text resizing. Specifically, we can once again use px for font definitions and widths.
Dave poses it as a question, but to me there's really no debate: the endless checking of your page in various font sizes, and mending anything that may break, is not necessary any more.
CSS | Permalink
7 May 2008
Exactly how does line-height: normal work? It's a confused mess. I'm SO glad we've got Eric Meyer to figure this out for us; I wouldn't want to do it.
CSS | Permalink
17 April 2008
Jonathan Snook explains why he doesn't use a CSS reset.
I'm okay if one browser displays an H1 a few pixels larger or smaller than other browsers. If one browser defaults to circle bullets and another to squares, that's usually not a problem. [...]
One of the principles I took away from the Web Standards community was the concept that pixel perfect precision across the various rendering engines was impractical and a remnant of the table-based layouts of yesteryear. With CSS and progressive enhancement, it was okay that things might look a little different from one browser to the next because of variations in what they supported.
Interesting argument.
CSS | Permalink
14 April 2008
A proposal for CSS variables. I'm not sure what official status this draft has (it's not on the W3C site), but the idea is so excellent that I don't care. Browser vendors: implement this.
(Via CSS3.info)
CSS | Permalink
3 March 2008
Useful advice. I don't do this yet on QuirksMode.org, but I did supply a max-width on an em-based site I created recently.
CSS | Permalink
22 January 2008
John talks about rounding problems with percentual widths. The problem is a nasty one, and I decided long ago that even a perfect browser would have serious problems with this. Therefore I'm not particularly surprised that browsers differ on the exact treatment of percentual widths.
Just make sure you test everything in all browsers, and don't try to make the elements fit perfectly—that won't work.
In fact, when I use percentual widths my standard routine right now is to make very sure that, when all widths are added up, about 2 to 4 % of the total width is left for the browser to divide as it sees fit. (OK, usually my elements also have a padding, and in the "W3C box model" padding make everything much more complicated.)
CSS | Permalink
22 November 2007
Sitepoint is on the verge of publishing an ultimate CSS reference, and one of its findings is that IE7, despite being light-years ahead of IE6, still doesn't have really good CSS support. Sitepoint has tried to be fair to IE by not counting its lack of support for inherit, but that action still doesn't help IE7 from running up quite a few "Buggy" entries.
I want to see their actual tables (and test cases) before committing myself to a stance on this, but the news seems to be not good.
CSS | Permalink
Andy wonders why everybody is so negative about "instant cake mixes" (nudge, nudge, know what I mean). What bothers people so much about them?
It's a fair question, especially since I think I count myself among the anti-cake-mix crowd—for now. Of course I have never actually used the instant mixes, so I argue from perfect ignorance; something that's quite popular in cake-baking circles.
Maybe, just maybe, the problem is that cake-baking as a whole isn't quite mature enough yet to automate. On the other hand, the very fact that instant mixes have appeared might mean that we have crossed the line from lovingly crafted handiwork being the only reasonable alternative to a situation where handicraft and instant mixes start to kind of — mix, so to speak.
The above paragraph rambles a bit, which seems to mean that I myself don't quite know what I want to say. Besides, I find myself moving away from baking cakes toward creating unobtrusive roast beefs as a topping for structural mashed potatoes and veggies—without ever using pre-roasted beef gridworks, it goes without saying.
Finally, Andy definitely has a point when he says that part of the fear comes from old-fashioned craftspeople afraid of being replaced by instant-cake-mixing factories. Nonetheless, craftspeople have been said to be in danger of replacement often, and it has never actually happened yet. True craftspeople just move on to a new craft instead of passively waiting to be replaced.
CSS | Permalink
More years ago that I care to think about, Owen Briggs, one of the unsung heroes of early CSS, published an influential set of articles about text sizing in CSS. What always struck me is how much effort he put into this project; I mean, taking 250+ screenshots and then interpreting them is not something you do in a few stolen hours.
Unfortunately, the intervening 5 years and countless browser versions have made his conclusions less applicable to today's situation.
Therefore Richard Rutter of Clearleft fame has had the excellent idea to take a look at this question anew and publish his findings at A List Apart. True, Richard has done "only" 150+ screenshots, but still the result is quite worth it. Besides, he also covers text resizing, something that Owen didn't because back then it wasn't a factor in web developers' calculations yet.
CSS | Permalink
15 November 2007
David Storey offers a way out of the CSS 2.2 vs. CSS Snapshot dilemma:
Any feature that has more than one implementation should be listed with a short justification why it isn't included or ready.
Now we just need a list of such features. Maybe, in the new year, when I have more time, I'll see if I can create such a list.
CSS, Standards/W3C | Permalink
Dispelling some CSS specificity myths. Useful overview of what early tutorials did wrong (or at least implied).
CSS | Permalink
6 November 2007
Rachel Andrew asks what people expect from an advanced CSS course (or book). I'd like to know the same.
CSS, Skillset | Permalink
1 November 2007
Dave Hyatt announces the lastest addition to Safari's CSS: animations.
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}
Now this sounds great, but I have to agree with Shaun Inman and Jonathan Snook that these new properties blur the line between presentation and behaviour even more.
Behaviour and presentation have to be separated somewhere; there has to be some sort of line dividing the two. The problem is that on the CSS side of things there are plenty of people who want to slowly push back the line, integrating more and more functionalities that once were JavaScript-only into CSS (content, for one).
Now animations. Where will it stop? Presentation is presentation, and behaviour is behaviour.
Besides, didn't we decide that we should attempt to follow the W3C standards? For sure, "following" has acquired the secondary meaning "implementing declarations W3C is considering but hasn't yet made up its mind about", but just about all new CSS additions actually have some sort of basis in some sort of spec. Animation hasn't.
All in all I wonder whether this is a good idea.
CSS, Safari, Theory | Permalink
28 October 2007
Back in May, Andy Budd proposed CSS 2.2 as a way of filling the gap between the 2.1 specification and the current browser implementations.
The CSS Working Group has taken him up on this by publishing the CSS Snapshot, which gives an overview of the CSS 2 and 3 modules that browsers currently (mostly) support.
Any himself indicated that this is not exactly the CSS 2.2 he envisioned. He'd hoped for
a list of all the selectors, properties and values that the working group felt were stable and ready for implementation. That way, browser manufacturers could start implementing and testing new features, under the knowledge that they weren’t going to change. Similarly, us web developers could start playing with these features and baking them into our more avant guarde projects.
He's right in that the Snapshot doesn't exactly provide such a list, but I'm afraid it's the best we're going to get right now.
CSS, Standards/W3C | Permalink
11 October 2007
David Storey of Opera has a few critical notes about the CSS Eleven initiative. Although some of these are unavoidable (some people are not invited; big deal; I wasn't and I don't care), his other points may be more serious.
For instance, David feels that the members should be "elected"; and that brings us smack bang back to the elitism vs. democracy debate, in which I stand firmly on the side of the elitists (more on that in March in Austin).
The CSS Eleven consist of people who've decided to sacrifice part of their spare time for helping out countless other web designers/developers. As a general rule I feel that whoever does the actual work decides exactly how it is to be done.
Who would elect the CSS Eleven? Why would they have to be elected, anyway? Why should we let people who are not willing to spend a lot of time on these problems to have a vote in deciding who will be allowed to spend their time on it?
Further, David talks about the predominance of white males. Although this is undeniably true, I refuse to see it as a problem. After all, our web development world is predominantly white and male. (David also said there were no women in the group; and that's not true: Jina Bolton appears quite female to me.)
What David doesn't mention is the under-representation of non-native speakers of English (Roger Johansson is the single one).
Again, I don't really mind. I'm going to speak at two conferences in the next six weeks, and in both I'll be the single non-native speaker. No big deal, but when we bemoan the lack of women and non-whites in our web development world, non-native speakers of English should at least get an honourable mention.
Anyway, this, too, is something that won't be decided in a hurry. I wish the CSS Eleven all luck in the world; they'll need it.
CSS | Permalink
Andy Clarke has announced CSS Eleven,
an international group of visual web designers and developers who are committed to helping the W3C's CSS Working Group to better deliver the tools that are needed to design tomorrow's web.
Let's see what they come up with.
CSS | Permalink
Now that, besides Opera, Safari will also start to support @font-face, it's becoming more and more interesting. IE still has its proprietary, but not wholly unworkable, .eot system. So that means that right now only Firefox is missing this particular boat.
Richard Rutter gives an overview of the pros and cons of downloadable fonts, and he finds the cons not very convincing:
Welcome, @font-face.
CSS | Permalink
8 September 2007
Some test cases that show Opera 9.5´s new CSS capabilities. I haven´t yet downloaded the alpha version, but if it truly supports all that´s mentioned here, we´ve got a nice new browser coming.
CSS, Opera | Permalink
31 August 2007
Alastair Campbell believes that frameworks cannot be applied to CSS almost by definition. He makes a few interesting points, most importantly that using CSS frameworks requires you to change your HTML, even though the point of using CSS is not changing your HTML for design purposes (see, however, here for a contrary opinion).
In any case, I'm wondering if this problem is fundamental to any CSS framework that will ever be written, or incidental to the current crop of CSS frameworks. If the latter, the situation can improve markedly as soon as a really good CSS framework is released.
I'm undecided.
CSS | Permalink
29 August 2007
As it says (Kestrel being the code engine of the upcoming Opera 9.5)
CSS, Opera | Permalink
According to Håkon Wium Lie, Web fonts that can be downloaded and used in your pages, are the next big thing. I agree they would be nice to have, but I'm wondering if they are quite that important.
CSS | Permalink
17 July 2007
A step-by-step tutorial on using position: absolute for liquid layouts.
CSS | Permalink
16 July 2007
Lots of CSS enhancements in Safari 3. Unfortunately Saf 3 Windows crashes when you scroll past one of the appearance tests.
CSS, Safari, Tests | Permalink
6 July 2007
A solid treatment of percentages in CSS background-position.
CSS | Permalink
10 June 2007
We all know the four traditional link states should go in the order :link, :visited, :hover, :active. But where does :focus fit in? Eric asks for your opinion.
CSS | Permalink
9 June 2007
... says Ian Hickson, who's actually a member of said working group.
CSS, Standards/W3C | Permalink
16 May 2007
Eric on form field styling, which is one of the most complicated areas in CSS. Interestingly, Eric doesn't give the rules (such as they are) that browsers obey (or not), but challenges you to think on what, say, select {padding: 10px} should do. No answers here, but a lot of the right questions.
CSS | Permalink
8 May 2007
Veerle shares a few useful hover tricks for liquid layout situations.
CSS | Permalink
Andy thinks it's time for CSS 2.2: an intermediate step between 2.1 and the proposed (and proposed and proposed) 3.
My fear is that the W3C has bitten off more than it can chew, and this is having a negative effect on the web. We currently live in a world of live texture mapping and rag doll physics. And yet as web developers, we don’t even have the ability to create rounded corner boxes programmatically. The W3C are so concerned with shaping the future, I’m worried that they may have forgotten the present. Forgotten the needs of the average web designer and developer.
This complaint is nothing new; but nowadays it comes from serious standardistas instead of fringe people. Although I completely agree, I feel that W3C may (ponderously, but still) be reverting to the right track; witness the new HTML WG that at least tries to do things differently. And trying comes before succeeding.
CSS, Standards/W3C | Permalink
2 May 2007
1 May 2007
Large linkdump of all kinds of float-related tutorials, examples, and articles.
CSS, Linkdumps | Permalink
27 April 2007
Roger is forced to work on some table-based layouts, and discovers table-layout: fixed. His report states it works pretty well in all browsers. When I tested it years ago, support was not nearly as god.
CSS | Permalink
24 April 2007
Eric is still working on his reset styles, but is stuck on Explorer not supporting inherit. What he'd really like is
CSS, IE | Permalink
15 April 2007
Eric presents a 'reset style sheet' that essentially removes most default styles for many HTML elements by seting borders, paddings and margins to 0, etc.
CSS | Permalink
10 February 2007
Eric asks for the most important and/or overlooked events in the history of CSS and web design. I thought about it for a while, but frankly I couldn't think of something that, to me, was much more important than all other events.
Fortunately most commenters aren't similarly inhibited. This promises to be a useful list for future historians.
CSS, History | Permalink
24 January 2007
19 January 2007
Useful linkdump of CSS techniques you're going to need one day.
(Via Naar Voren.)
CSS, Linkdumps, Showcases | Permalink
16 November 2006
Andy Clarke reveals his CSS testing order. I don't entirely agree (I test everything I write in IE and Firefox simultaneously), but his approach interesting nonetheless—and it might turn out to be better than mine in the long run.
Browsers, CSS | Permalink
8 November 2006
John Allsopp has updated his CSS compatibility tables, which are probably the best on the 'Net.
CSS, Reference | Permalink
20 September 2006
Some useful CSS tips and best practices. I can especially recommend the zoom: 1 to force IE into 'having layout'; I often use it myself (also on this site).
CSS | Permalink
19 September 2006
6 September 2006
Dave Hyatt on parsing order. Are CSS files read first, while the HTML is stalled, or are they read at the same time?
Browsers, CSS, JavaScript | Permalink
25 August 2006
Dave Shea gathers IE 7 CSS regressions (stuff that works in IE 6 but not in IE 7).
CSS, IE | Permalink
23 August 2006
14 August 2006
Chris Wilson gets tired of IE bashing, that continues even now that IE 7 turns out to be a giant step forward. True, IE is still behind the other browsers in some areas, but saying that it's moved forward only '2 %' is just plain nonsense.
'I'd love to have a honest, straightforward, unbiased statement of exactly where we (and other browsers) are – despite the fact that I know we would be behind today.'
CSS, IE | Permalink
27 July 2006
Eric discusses John Dvorak's recent rant against CSS. Although he disagrees with every particular, he rightly points out that this reaction to CSS is common amongst newbies. Interesting point.
CSS | Permalink
17 July 2006
About definition-list-fundamentalism, float-exegesis, and other undesirable offshoots of the Web standards revolution.
CSS, HTML, Standards/W3C, Theory | Permalink
3 July 2006
...and the Father of Modern Web Design brings us gifts, too...
Books, CSS, HTML, Standards/W3C | Permalink
And more booky goodness, this time by CSS/design superhero Andy Clarke.
Books, CSS | Permalink
13 April 2006
31 March 2006
A useful overview of most important accessible CSS techniques. Start here if you're new to the subject.
Accessibility, CSS | Permalink
16 March 2006
9 February 2006
Transcript of some questions and answers from a chat session about IE 7's CSS support.
CSS, IE | Permalink
4 February 2006
I've often wondered the same.
CSS, Theory | Permalink
Andy Clarke's site seems to be the prime victim of IE7's lack of support for CSS hacks.
CSS, IE | Permalink
Andy Budd wonders about the IE team's drive to get rid of CSS hacks. 'I think the IE dev team are catering to a group of developers who build their sites with IE, rather than the standards in mind.'
Could be, but we'll have to get rid of the hacks anyway.
CSS, IE | Permalink
2 February 2006
Where CSS-Discuss members are dumping their IE 7 information.
CSS, IE | Permalink
Highlights important changes in IE's CSS support.
CSS, IE | Permalink
23 January 2006
I completely agree, but I recall there were pressing reasons why this could not be implemented.
CSS | Permalink
18 January 2006
Safari will also get a Web Inspector. Looks useful.
CSS, Safari, Tools | Permalink
On the changes to the select element in IE 7. The ancient bug will finally be solved.
CSS, IE | Permalink
10 January 2006
Roger Johansson takes a look at new CSS 3 selectors, of which a few are already supported today.
CSS | Permalink
4 January 2006
Andy Clarke discusses multi-column layouts and their typographical problems, and suggests a few extra useful column properties.
CSS | Permalink
22 December 2005
Molly gives a useful overview of the discussion caused by the IE team's decision to remove the * html hack from IE 7.
CSS, IE, Linkdumps | Permalink
20 December 2005
Derek Featherstone on some unsuspected problems with CSS background images.
CSS | Permalink
16 December 2005
Andy Clarke shows the nice things you can do with z-index. Includes a discussion of the stacking context, something that frequently baffles CSS newbies.
CSS | Permalink
12 December 2005
Richard Rutter translates print typography best practices into CSS. Work in progress.
CSS, Reference | Permalink
3 December 2005
An advent calendar with a web development tip for every day.
Accessibility, CSS, HTML, JavaScript | Permalink
1 December 2005
Andy Budd starts a list of *important* CSS bugs in Safari, Firefox and Opera. Could grow into something interesting.
Browsers, CSS, Reference | Permalink
27 November 2005
Tantek on CSS hacks.
'It is actually a good thing that a hack be visually ugly from a coding aesthetic point of view in the hopes that the ugliness will be a reminder that the hack is a hack, and should incite a tendency for people to a) minimize its usage, and b) remove its usage over time.'
CSS, Theory | Permalink
15 November 2005
Inverse conditional comments explained; ie. conditional comments meant for browsers other than Explorer.
CSS | Permalink
5 November 2005
Interesting techniques for ordering columns, applying an equal height to columns, and creating vertical grids. This long article will no doubt come in usefully in a variety of situations.
CSS | Permalink
18 October 2005
Eric Meyer advises us not to change our CSS hacks before the IE 7 beta is actually available. Furthermore, he feels that Dean Edwards's IE 7 script may become our saviour in time of need.
CSS, IE | Permalink
14 October 2005
An interesting summary of the incorrect implementation of overflow: visble in IE. Solutions: use overflow: hidden (obviously) or the MS proprietary, but nonetheless interesting, word-wrap: break-word
CSS, IE | Permalink
13 October 2005
7 October 2005
I just discovered this useful Mozilla sidebar that lists all HTML, CSS and JavaScript elements, declarations and methods. The CSS part contains links to my CSS pages for further information on a few properties.
CSS, HTML, JavaScript, Tools | Permalink
26 September 2005
Simon calls for ideas on how to write maintainable style sheets. I completely agree that this is going to be a major problem, but unfortunately I have no brilliant ideas to share. If you do, tell Simon about it.
CSS | Permalink
16 September 2005
How to use the user defined colors (active application bar, menu font size etc.) in CSS. Very useful, and this CSS capability isn't much used yet.
CSS, Reference | Permalink
14 September 2005
Eric Meyer says Mozilla's print CSS compatibility sucks. From my own experiences I completely agree.
My Mozilla 1.75 WinXP crashes when I use Print Preview on http://alistapart.com/articles/pdf_accessibility
CSS, Mozilla | Permalink
2 September 2005
Nice idea. A gallery of simple but effective CSS table solutions, so that data tables become less boring.
In the true CSS Zen tradition you can submit your own designs, too.
CSS | Permalink
1 September 2005
Markus Mielke of Microsoft explains the feared hasLayout property, its use, and the disadvantage of giving everything layout. Very enlightening.
CSS, IE | Permalink
28 August 2005
Very useful overview of the hasLayout property and the problems it causes.
CSS, IE | Permalink
27 August 2005
Stuart Langridge takes a look at a proposed way of removing CSS hacks from your code, and finds the method wanting.
Although CSS hacks are definitely a Bad Thing, and I find the proposed solution (using <html class='firefox' >, <html class='ie'> etc.) interesting, I agree with Stuart that it calls for server side browser detects. In additon to Stuart's criticism, I feel that browser detection is generally too subtle an art for server side coders who don't know their browsers. Besides, we all agreed we wouldn't use them any more, didn't we?
CSS | Permalink
Very useful CSS trick, and it's so damn obvious once you understand it.
CSS | Permalink
1 August 2005
On IE problems with pseudo-elements and pseudo-classes.
CSS, IE, Tests | Permalink
26 July 2005
A subject that interests me highly. I recently considered a sidenote system like the one presented here, but with one slight difference. Maybe I'm still going to write that article, but I first have to study the examples mentioned here.
CSS, JavaScript, Usability | Permalink
18 July 2005
11 July 2005
Which CSS properties change when Mozilla goes into quirks mode?
CSS, Reference | Permalink
Dedicated to providing solid information, documentation, and community for Mozilla and Firefox developers. Looks like an interesting initiative, and as far as I can see now the JavaScript and DOM pages might eventually take the place of the alas disappeared devedge JavaScript reference.
CSS, HTML, JavaScript, Mozilla, Reference | Permalink
10 July 2005
A test suite by Gez Lemon that checks what browsers do right/wrong when you send XHTML pages as text/html or as application/xml+xhtml . Could use a formal compatibility table, but otherwise the tests are quite interesting.
CSS, HTML, JavaScript, Tests | Permalink
Interesting series of compatibility tables for HTML, CSS and JavaScript in Explorer Windows, Mozilla and Opera. I think my W3C DOM Tables are more useful and detailed, but the tables here are definitely more complete.
CSS, HTML, JavaScript, Reference | Permalink
This is the linklog of Peter-Paul Koch, mobile platform strategist, consultant, and trainer. You can also visit his QuirksBlog, or you can follow him on Twitter.
Category rchives:
Monthlies: