157 items tagged “css”
2007
JavaScript/CSS Font Detector (via) Really clever trick: detects the fonts that you have installed by writing out some text and measuring its dimensions.
soupselect. My simple extension to BeautifulSoup that allows you to grab elements using CSS selectors; should be useful for parsing microformats.
Rails 1.2.1 Impression. I hadn’t seen assert_select before, which lets you unit test generated HTML using CSS selectors; a really neat idea.
Em Calculator. Tool for working out CSS relative em values, useful for creating completely resizable layouts.
MySpace: Too Much of a Good Thing? CSS customization really was just the result of forgetting to strip HTML. They “eventually” decided to filter out JavaScript(!)
CSS library for Python (via) “A Python package to parse and build CSS Cascading Style Sheets. Partly implements the DOM Level 2 Style Stylesheets and CSS interfaces.”
Microsoft Breaks HTML Email Rendering in Outlook 2007. They’ve dropped the IE renderer and replaced it with... Microsoft Word! No CSS background images, no floats, no CSS positioning, no forms. Wow.
2006
Introducing text-stroke. Webkit has some sexy new CSS properties: -webkit-text-fill-color, -webkit-text-stroke-color, -webkit-text-stroke-width.
Conditionally Sticky Sidebar. A nicer implementation of the trick I’m using for my add comment form; this one takes advantage of position: fixed in browsers that support it.
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.
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.
Natalie Downe: Inline image quotes. Neat CSS trick this one.
Mozilla causing XSS in Livejournal. Their recent worm attack was caused by the -moz-binding CSS property.
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.
Ned Batchelder: Css-discuss wiki. Ned says nice things about the Wiki.
2004
Background Images Security Flaw? Styling :visited links can reveal a user’s browser history.
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.
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.
[... 2,979 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.
[... 1,178 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.
[... 1,276 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.
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]