229 posts tagged “css”
2003
Delay to the start of my CSS tutorial series
I still plan to go ahead with a CSS tutorial series, as promised. I’m delaying the start, partly to give myself time to work out a good structure for the series, but mainly because I have a shed load of coursework due in a week today that desperately needs my full attention.
Defending Structural Markup
I’ve been somewhat taken by surprise by the latest round of anti-CSS rants (initiated by JWZ, followups all over the place), mainly because I’ve been using CSS for long enough now that I’d started to forget about the legions of web developers out there who haven’t yet realised what they’re missing. Instead of getting stuck in to dissecting other people’s complaints I’m just going to lay down a few of my own core beliefs.
[... 841 words]CSS Headings
Via Craig Saila, Christopher Schmitt’s 50 CSS Headings. Free CSS code snippets is definitely an idea who’s time has come—there are hundreds of copy-and-paste javascript sites out there but hardly any for CSS (discounting the many excellent full layout sites). Mark Newhouse’s extremely popular CSS Design: Taming Lists article does the same thing for lists but other than that this kind of resource is extremely rare. Web developers not interested in moving to CSS completely can still benefit hugely from using it in their current sites in place of nested formatting tables and presentational tags used to give the visual appearance of headings, so the more of this kind of thing out there the better.
CSS Feedback
My rambling post on CSS yesterday has had some excellent feedback, including some insightful comments on the weaknesses of CSS layouts. My call for a new bookmarklet drew responses (and implementations) from both Stuart Langridge and Jesse Ruderman! Both are well worth installing.
CSS Layout Generators
A tool for generating 3 column CSS layouts that appears to use Big John’s Source Ordered Columns technique. CSS generating tools are a thoroughly excellent idea and I’m surprised no one has done one before; the CSS community is at a point now where there are some well understood, solid layout techniques available and some kind of tool that helps generate frameworks for new designers could really help speed up CSS adoption.
[... 134 words]Yahoo Search uses CSS
In all the fuss about Yahoo’s new search interface over the past few days, the extensive use of CSS in the results pages was almost completely overlooked, probably because the page still contains a small layout table for the top and bottom navigation. The results themselves are served up as a styled ordered list, at least for modern browsers (thanks to a server side browser sniffer). More information in this message from Yahoo’s Brian Ghidinelli, who is seeking feedback.
CSS Support Charts
Time to update bookmarks: The Web Review CSS Support Charts, which went offline several weeks ago, are back at a new home on Netscape DevEdge. Despite not having been signiicantly updated since 2001 they still are still an excellent reference to refer to for CSS browser compatibility issues. More information from Eric Meyer.
Three column layouts in CSS
ThreeColumnLayouts in the css-discuss Wiki currently lists 24 freely available three column CSS layout templates.
css-discuss archives back online
After several months spent offline, the css-discuss archives are back and better than ever thanks to the hard work of my colleagues at Incutio. As well as updating the archives with all of the missing posts from the past few months they’ve improved the URL scheme to make things more search engine friendly (hopefully Google will start indexing the archives now).
Glastonbury does CSS
Cool—the new Glastonbury Festival website uses a CSS layout! Unfortunately it completely fails to validate as XHTML Transitional, but comes to within an inch of validating as HTML 4.01 Transitional (they just need to change the doctype, take out a few XHTML specific attributes and clean up a misplaced <b> tag).
Smarter CSS positioning
Daniel Glazman’s proposal for smarter positioning in CSS (see also this blog entry) makes a lot of sense.
getElementsBySelector()
Inspired by Andy, I decided to have a crack at something I’ve been thinking about trying for a long time. document.getElementsBySelector is a javascript function which takes a standard CSS style selector and returns an array of elements objects from the document that match that selector. For example:
Credibility and CSS
James Buckley links to a new report on How people evaluate a web site’s credibility. His comments:
[... 324 words]Browser detection reconsidered
Leonard Lin on The Folly of Depending on CSS Parsing Bugs:
[... 333 words]Work safe CSS
Here’s a novel use of a stylesheet switcher: Providing a “work safe” edition of a weblog.
Better image rollovers
When browsing through other site’s source code, some of the ugliest HTML occurs when the site uses one of the most basic javascript effects: The image rollover. There are a myriad of these scripts available for free on the web, but as far as I can tell every single one of them requires event handling code to be added to the markup of the page.
[... 341 words]Safari conditional comments
The current extended discussion over whether or not Safari should have some kind of specific CSS blocking technique built in (sparked off by Mark Pilgrim) reminds me of a relatively unpublicised feature of Internet Explorer called conditional comments. These specially crafted HTML comments allow web authors to specifically hide code from versions of IE, or alternatively to hide code from any browsers that are not a specified version of IE. Here’s how they work:
[... 198 words]Safari surprise
I dunno, you take the evening off to watch a daft Bond movie (Goldeneye was showing on ITV) and when you log on again the world is aflame with reports of Apple’s new browser, Safari. To everyone’s surprise it’s based on the KHTML engine as seen in Konqueror, rather than using Mozilla’s Gecko engine. I’ve used Konqueror a fair bit in the past few months and it really is an excellent rendering engine (I was amazed when it rendered all of my favourite CSS layout sites flawlessly) but this is still something of a shock, especially considering Apple’s recent hiring of Dave Hyatt, a key member of the Mozilla project and the guy behind the excellent Gecko-based browser Chimera.
[... 176 words]Vertical centering with CSS
Lots of people said it couldn’t be done (myself included), but evidently we were wrong. Joe Gillespie shows how to achieve vertical centering with CSS in the latest edition of WPDFD. Via Craig Saila, who also has an experimental piece showing how the height of three divs can be set to the height of the tallest of the three, using javascript.
2002
Blockquote citations
Inspired by Adrian Holovaty, I spent an hour this morning getting dirty with the DOM in an effort to replicate his funky CSS blockquote citations effect but with links that you can actually click on. The resulting code is now active on this weblog—check the javascript out here.
[... 86 words]OmniWeb CSS hack
The hack we’ve all been waiting for: How to hide CSS from OmniWeb. OmniWeb is a Mac browser which understands the @import rule but horribly mangles CSS layouts beyond all repair. Thanks to this hack CSS sites with a noticeable percentage of OmniWeb users (and anyone else who cares) can give OmniWeb the same treatment normally reserved for Netscape 4.
Partner as a case study
I’ve been helping my partner Natalie Downe recreate her site using CSS and structural markup. She’s new to web design and has been taking to CSS like a duck to water—as a veteran of Microsoft Word globally defined styles come to her naturally and she took very little time to cotton on to the importance of seperating presentation from content. I’ve shown her tables as well but she isn’t really interested as she sees CSS as a much better solution for general presentation. I’m hoping to help run an HTML/XHTML/CSS training course at the University early next year with a heavy emphasis on structural markup, standards compliance and accessibility so it’s great to have a guinea pig to play with :)
[... 203 words]Joe Gillespie does CSS
Joe Gillespie has been introducing CSS to the readers of Web Page Design for Designers.
[... 210 words]CSS roundup
Jeffrey Zeldman has resolved his niggling CSS bugs, and posted the workarounds for all to see. What’s amazing and unprecedented about CSS layout is that it’s completely abstracted from the data it presents.
he muses. Dorothea Salo points out that the publishing industry has been doing this for hundreds of years. Meanwhile, Todd Dominey has overhauled his CSS to get rid of the javascript browser detection and Mark Pilgrim and Scott Andrew have both posted funky Halloween CSS makeovers.
More CSS layouts
I’m not sure when it happened, but Opera.com has been redesigned (since the last time I checked the site). The new layout is done with valid XHTML and CSS but is decidedly tabular in appearance, demonstrating that using CSS does not (as some people have claimed) make it impossible to achieve the same kinds of layouts as table coders have been creating for years. It also degrades quite nicely in Netscape 4 (losing most of the layout but maintaining a crisp look and feel). In related news, Jeffrey Zeldman is currently redesigning The Daily Report with CSS (replacing his old transitional tables/CSS layout). No menu yet, but it displays in Netscape 4 almost exactly the same as Mozilla and IE.
Sidekick suck
Leonard Lin has a new HipTop—a hand-held wireless device for browsing the internet. His description of how well different sites work in the device makes for depressing reading. Blogs constructed with CSS and web standards in mind frequently fair worse than less well structured sites—it seems that rather than ignoring the CSS as it should do the device’s browser attempts to render it and mangles sites in the process. Anil Dash has an excellent summary of why this is a Bad Thing(TM) for all involved.
Taming lists
In CSS Design: Taming Lists, Mark Newhouse explains in detail every CSS list trick in the book, including inline lists, nested breadcrumbs and a variety of other useful techniques. He also links to Eric Meyer’s essential DevEdge article Consistent List Indentation which explains how to deal with the differences between list indentation in Internet Explorer and Mozilla.
CSS in the real world
Adrian Holovaty: CSS in the real world. Adrian uses CSS to reduce the markup for a list of news headlines by 75%:
[... 56 words]