145 items tagged “css”
2006
RoundedCornr. Generates code for rounded corner boxes (with optional graded fills—very Web 2.0). Slightly different way of nesting divs to the way I’ve used in the past. # 16th December 2006, 11:49 pm
YUI CSS Grid builder (via) The YUI CSS grid system can be hard to get your head around. This interactive tool makes it much easier to figure out. # 16th December 2006, 10:30 pm
Natalie Downe: Inline image quotes. Neat CSS trick this one. # 22nd November 2006, 12:29 am
Mozilla causing XSS in Livejournal. Their recent worm attack was caused by the -moz-binding CSS property. # 22nd January 2006, 9:37 pm
2005
Maintainability, a.k.a. the CSS elephant
Now that even Slashdot has made the move to CSS it’s safe to say that the CSS advocacy battle is slowly being won. It’s time to talk about the elephant in the corner of the room: stylesheet maintainability.
[... 317 words]Firefox 1.5 developer highlights
Firefox 1.5 Beta 1 is out, and is the most exciting browser release in a very long time. It comes with the Gecko 1.8 rendering engine, which includes a ton of interesting new features. New in this version (unless you’ve been tinkering with the Deer Park series):
[... 719 words]Internet Explorer 7. It’s been announced, but the stated focus is security and anti-phishing. No news on improved CSS. # 15th February 2005, 7:04 pm
Ned Batchelder: Css-discuss wiki. Ned says nice things about the Wiki. # 2nd February 2005, 8:23 pm
2004
Background Images Security Flaw? Styling :visited links can reveal a user’s browser history. # 24th May 2004, 8:24 pm
2003
3 column CSS layouts: Easier than you might think
In a recent issue of the Sitepoint Tech Times newsletter, Kevin Yank explains (in detail, with pictures) the recurring problem in CSS of trying to create a three column layout with columns of equal height and a footer spanning all three. If you don’t yet understand the problem, you will once you’ve read his article. Kevin suggests a javascript fix for the problem, but fails to mention that by using floats instead of absolutely positioned divs for the side columns a three column layout with a full width footer can be achieved without resorting to javascript. Pixy’s 3 columns, no hacks demonstrates this technique in action. In addition, the CSS-Discuss Wiki has a comprehensive list of 3 column layouts that demonstrate a number of other techniques for solving the same problem.
[... 142 words]Using bookmarklets to experiment with CSS
I’m in the middle of a whole bunch of exams at the moment, but here’s a quick tip that should make experimenting with and learning CSS a great deal easier. It involves bookmarklets. If you haven’t seen them before, bookmarklets are bookmarks that embed javascript; when you click the bookmark, the javascript is executed in the context of the currently loaded page. What that means is that in a suitably advanced browser bookmarklets can be used to modify pages, analyse their structure and do a whole host of other useful things.
[... 813 words]Fun with links
Yesterday we talked about the box model. Today we’re going to put a small part of it to work, by investigating ways of styling links. Before getting stuck in, we need to talk a bit about pseudo-selectors (also known as pseudo classes). The CSS specification defines pseudo classes as “characteristics that cannot be deduced from the document tree”, but in practise the only widely implemented psuedo selectors are those that apply to links. The key psuedo selectors for links are:
[... 810 words]Understanding the Box Model
Today’s tutorial is going to be all theory. The box model is an inevitable part of CSS, and understanding it is critical if you want to do anything remotely interesting. Like most of CSS, it’s a lot simpler than it sounds. Here it is:
[... 626 words]CSS Tutorial: feedback so far
My CSS tutorial series has been getting some fantastic feedback, both in this blog’s comments system and elsewhere. This entry will summarise the most useful feedback, acting as a kind of errata to the previous entries. Thanks to everyone who commented, there are too many to credit individually but you can see most of the points in their original format by browsing the comments attached to each entry.
[... 661 words]Quick tip: Styling blockquotes with CSS
Today’s tutorial is going to be short one, as I’m working on one last piece of coursework. This time I’m going to explain a clever CSS trick borrowed from Nick Boalch. Here’s a screenshot:
[... 475 words]Defeating IE5 CSS bugs with the help of jwz
Today’s CSS case study will be Jamie Zawinski’s LiveJournal. OK, I admit that he’s something of a tempting target after his widely publicised CSS rant last month (which was the main inspiration for this course), but there are a number of sensible reasons his site makes a good case study as well. The theme for today is “bugs in IE5 for Windows”, and jwz’s site offers two classic examples that fit this theme nicely. The first is the fact that the design is centered on the page, and the second is his choice of Verdana, a font which requires some trickery to get working well in IE5. In addition, the design of the entries seems to be a natural fit for a table based layout, so demonstrating how much simpler the code can be in CSS will hopefully turn a few heads.
[... 2979 words]Scripting.com, with added CSS
One of the aims of this course is to show how relatively simple CSS can be used to make dramatic improvements to existing sites. Today, I’ll show how CSS can be used to reduce the amount of code needed for a small part of the design of Scripting.com.
[... 1178 words]The anatomy of a stylesheet
To start my series of tutorials, I’m going to go over some of the basics of CSS. This is the boring bit: if you already know the difference between rules, properties and selectors you may want to skip this entry.
[... 1276 words]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.
[... 56 words]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]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:
2002
Girlfriend as a case study
I’ve been helping my girlfriend 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 :)
[... 201 words]Pretty link on Kottke
In a discussion on css-discuss recently about underlines a on links, I pointed to kottke.org as an example of clever use of CSS for links where by the link underline is a slightly later colour than the link text. Today, Jason explains the technique and the thinking behind it.
[... 59 words]