OpenID73 items tagged “css”
CSS Variables. Hooray! My number one requested CSS feature (and I know I’m not alone), proposed by Daniel Glazman and David Hyatt so I imagine we’ll see it trialled in WebKit pretty soon. 
25th April 2008, 11:26 pm
CSS Compatibility and Internet Explorer (via) Official Microsoft guide to which CSS properties are supported by which versions of IE. This is the kind of documentation browser vendors should be providing as a matter of course. 2nd April 2008, 8:05 pm
Yahoo!’s Latest Performance Breakthroughs. 20 new performance tips to join the previously published 14. Flushing the buffer while the backend code is still working to cause the browser to start loading CSS earlier is interesting. 
20th March 2008, 3:17 pm
A brief introduction to Opacity and RGBA. The CSS opacity property is inherited by an element’s children; opacity set using the new rgba() declaration in CSS 3 differs in that it is not inherited. 17th March 2008, 2 am
Internet Explorer 8 Readiness Toolkit. The new built-in development tools look similar enough to Firebug to make me very happy. Also of interest: Selectors API (for fast getElementsBySelector), CSS 2.1 support, support for XHTML style namespaces in HTML, an interesting Web Slices feature based on the hAtom microformat and 6 connections per host (up from 2) which should make Comet easier. 5th March 2008, 6:28 pm
Equidistant Objects with CSS. Handy tip; I needed to do this recently and ended up setting everything using pixels. This works much better. 5th March 2008, 9:26 am
Table-Based Layout Is The Next Big Thing. Kevin Yank points out that the inclusion of display:table in IE 8 will finally open up a powerful tool for creating CSS layouts that has so far been mostly ignored. 4th March 2008, 11:01 pm
“Why doesn’t jQuery have an XPath CSS Selector implementation?” For now, my answer is: I don’t want two selector implementations—it makes the code base significantly harder to maintain, increases the number of possible cross-browser bugs, and drastically increases the filesize of the resulting download.
— John Resig 11th February 2008, 5:31 am
PrinceXML is extremely impressive. I had a poke at Prince (a commercial package for generating high quality PDFs from HTML, XML, CSS and SVG) a few weeks ago and was similarly impressed. 8th February 2008, 12:02 pm
If you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.
— Sjoerd Visscher 
22nd January 2008, 8:27 pm
Full Page Zoom Is For Sissies. Ryan points out that sizing everything in ems, while neat, imposes a pretty hefty maintenance cost and is rapidly becoming unnecessary thanks to the page zoom feature in IE 7, Opera and Firefox 3.0. 19th January 2008, 7:36 am
jQuery 1.2.2: 2nd Birthday Present. The API stays the same, but there are some healthy speed improvements, a new way of adding custom events and (most importantly) .ready() now waits for the CSS to be ready in addition to the DOM. 15th January 2008, 8:59 am
Javascript CSS Selector Engine Timeline. It’s not every day you see a piece of code you wrote compared to a Ford Pinto :) 14th January 2008, 1:25 pm
IE8 Passes Acid2 Test. This is huge. As Kevin Yank points out, this means IE8 includes proper support for the object tag, CSS table layout properties and generated content. 
20th December 2007, 3:11 pm
I don’t even use Firefox and Firebug anymore, the revised Web Inspector in Leopard has been incorporated in Coda and that does everything I need and more.
— Jon Hicks 20th December 2007, 3:09 pm
To get a better future, not only do we need a return to “the browser wars”, we need to applaud and use the hell out of “non-standard” features until such time as there’s a standard to cover equivalent functionality. Non-standard features are the future, and suggesting that they are somehow “bad” is to work against your own self-interest.
— Alex Russell 16th December 2007, 11:33 pm
ExtInfoWindow 1.0: Ajax powered, CSS customization. Finally, a semi-official way of creating customised info windows for the Google Maps API. You lose the default shadow but gain the ability to style the entire info window using CSS. 15th December 2007, 12:22 pm
Back To The Future of Print. Nat’s contribution to 24 ways: a long needed update on the state of the art in print stylesheets. 9th December 2007, 12:56 am
YUI 2.4.0 released. Lots of great new features, but the one I’m most excited about is Selector: YUI finally has a CSS query engine. 5th December 2007, 3:32 pm
The Rissington Podcast. Resize the browser window and marvel at the way the various background images seamlessly overlay each other—Nat and I cooed at it for about five minutes. 30th November 2007, 11:11 pm
Safari CSS Reference. Official documentation covering the CSS properties supported by Safari, including the -webkit proprietary extensions. 22nd November 2007, 11:51 pm
Using multiple classes within selectors. Pretty much definitive guide to using multiple classes in a CSS selector, including problems with IE 5 and 6 and one way of addressing them using conditional comments. 11th November 2007, 11:07 pm
CSS Transforms. WebKit can now do transforms (scale, rotate, translate and skew) in CSS via a new -webkit-transform property. Transforms behave like position relative in that they don’t affect the layout of the page. You can also provide a full affine transform matrix as a shortcut. 26th October 2007, 9:45 pm
CSS Sprite Generator (via) Upload a zip file of images and get back a CSS sprite plus a set of pre-calculated background image rules. Tool built by Ed Eliot and Stuart Colville for their forthcoming book “High Performance Web Site Techniques”. 27th September 2007, 10:59 pm
lxml.cssselect (via) lxml includes an implementation of CSS 3 selectors, which compiles them to XPath expressions. Should be a useful tool for parsing Microformats from Python. 24th September 2007, 11:57 pm
jQuery 1.2. Lots of neat new stuff; my favourite new feature is “Partial .load()” which lets you pull in HTML with Ajax and then use a CSS selector to grab a subset of that page and inject it in to the DOM. 11th September 2007, 8:44 am
Styling File Inputs with CSS and the DOM. Clever hack to style the un-stylable: set the opacity of the file input to 0, then use a bit of JavaScript to make sure the (now invisible) browse button is always under the mouse. 10th September 2007, 11:58 pm
XRAY now works in IE. Westciv’s smart CSS debugging bookmarklet now works in IE 6. 21st August 2007, 8:07 am
[On Blueprint] I’m somewhat conflicted with its release because I don’t think it should be used. Don’t get me wrong, it’s great, but don’t use it.
— Nathan Borror 14th August 2007, 10:42 am
Blueprint. A CSS Framework. I’ve been trying to articulate why I’ve started to think that structural class names are a necessary evil in the comments. 13th August 2007, 12:01 pm
I’ve been in this web standards game for five years now and probably have over 100 standards-based sites under my belt. I can count the number of times I’ve be involved in a redesign where no changes were made to the markup on one finger.
— Jeff Croft 11th August 2007, 9:37 am
WebCore Rendering I—The Basics. Dave Hyatt has started a series of posts explaining the internals of WebCore’s rendering system. 10th August 2007, 3:21 pm
Conflicting Absolute Positions. Neat technique, although it uses CSS expressions for IE compatibility so it may break down in IE 5 and 6 when JavaScript is disabled. 17th July 2007, 10:44 pm
The CSS Redundancy Checker. A tool for checking your markup for outdated CSS rules that don’t match any of your HTML. We were discussing the need for something similar to this at Torchbox a few weeks ago. 6th July 2007, 12:02 pm
The CSS working group is irrelevant. “Someone really needs to do to CSS what the WHATWG has been doing to HTML”. 6th June 2007, 10:10 am
start.gotapi.com. Lightning fast lookups of API documentation; includes Python docs, YUI, HTML, CSS and lots more. 5th June 2007, 6:05 pm
dojo.query: A CSS Query Engine For Dojo. I incorrectly criticised Dojo for not having a CSS node selection tool in my talk yesterday; not sure how I missed this. 17th May 2007, 9:40 am
Guardian Unlimited’s new look: Some background on templating. Nik Silver describes some of the challenges involved in building a complex new homepage using CSS and Velocity. 10th May 2007, 12:26 pm
CSS2.2. Andy Budd points out that CSS hasn’t had an update since 1998, and suggests rolling the most obviously useful parts of CSS 3 in to an incremental CSS 2.2. 6th May 2007, 10:45 pm
Setting Type on the Web to a Baseline Grid. Wilson Miner introduces a smart, methodical approach to well proportioned Web typography. 11th April 2007, 12:08 am
CSS Naked Day. Today is CSS naked day. Get naked! 5th April 2007, 8:27 am
The problem with pixels. IE7 lets users resize pixel-based fonts. Is it finally time to stop avoiding pixel sizing in CSS? 2nd April 2007, 2:11 pm
JavaScript/CSS Font Detector (via) Really clever trick: detects the fonts that you have installed by writing out some text and measuring its dimensions. 20th March 2007, 11:20 pm
soupselect. My simple extension to BeautifulSoup that allows you to grab elements using CSS selectors; should be useful for parsing microformats. 
28th February 2007, 1:47 pm
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. 15th February 2007, 9:14 am
Em Calculator. Tool for working out CSS relative em values, useful for creating completely resizable layouts. 6th February 2007, 2:03 pm
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(!) 17th January 2007, 9:09 am
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.” 15th January 2007, 2:32 am
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. 
10th January 2007, 8:18 am
Introducing text-stroke. Webkit has some sexy new CSS properties: -webkit-text-fill-color, -webkit-text-stroke-color, -webkit-text-stroke-width. 21st December 2006, 10:34 am
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. 20th December 2006, 1 am
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
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
Background Images Security Flaw? Styling :visited links can reveal a user’s browser history. 24th May 2004, 8:24 pm
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]
Flamin’ CSS
Dave Winer, in a follow up to his recent CSS problems: [... 807 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:
[... 172 words]
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]
