Simon Willison’s Weblog

Items tagged css

Filters: css ×


I think you overstate the usefulness of the [jQuery Rules] plugin. Using this plugin, users are now limited by what selectors that can use (they can only use what the browsers provide—and are at the mercy of the cross-browser bugs that are there) which is a huge problem. Not to mention that it encourages the un-separation of markup/css/js.

John Resig # 22nd February 2009, 11:11 pm

jQuery.Rule (via) jQuery plugin for manipulating stylesheet rules. For me, this is the single most important piece of functionality currently missing from the core jQuery API. The ability to add new CSS rules makes an excellent complement to the .live() method added in jQuery 1.3. # 22nd February 2009, 5:53 pm

FireScope. Neat little Firefox / Firebug extension which adds a “Reference” tab showing documentation for the selected element from the comprehensive SitePoint Reference site. # 5th February 2009, 10:51 pm

Recreating the button. Fascinating article from Doug Bowman on the work that went in to creating custom CSS buttons for use across Google’s different applications, avoiding images to improve performance ensure they could be easily styled using just CSS. I’d love to see the Google Code team turn this in to a full open source release—the more sites using these buttons the more familiar they will become to users at large. # 5th February 2009, 9:50 pm

Quickchoice—a Speed Dial clone (via) Lovely demonstration of the CSS transform property, as supported by modern browsers. The magic is all in the “iframe { transform: scale(0.25, 0.25) translate(-1200px, -900px) }”. # 23rd December 2008, 12:49 pm

Extending jQuery’s selector capabilities. I already knew this was possible, but the examples James Padolsey provides are eye-opening—I especially like his clever :data selector extension which lets you write CSS selectors that query against jQuery’s custom “data” DOM element storage in a manner similar to CSS2 attribute selectors. # 12th December 2008, 6:05 pm

24 ways: User Styling. The web geek advent calendar is up and running again this year, with a striking new design. # 3rd December 2008, 9:08 am

CSSHttpRequest (via) Devious cross-domain Ajax hack that uses CSS for transport (@import rules with data URIs, but it still works in IE). Similar to JSONP but safer, since JSONP can cause arbitrary JavaScript to execute. # 23rd October 2008, 6:25 pm

Conditional classnames. Yahoo!’s internal coding standards still recommend CSS hacks over conditional comments because a separate stylesheet for IE imposes an additional HTTP request. Paul Hammond points out that you can use conditional comments to write out an extra class=“ie” attribute on the body element and use that to target the IE specific fixes in your stylesheets. # 17th October 2008, 1:32 pm

CSS Systems for writing maintainable CSS. Nat has published the slides and notes from her BarCamp presentation this morning. I’m really excited about her approach, which involves designing a “CSS system” of markup patterns and CSS that embodies the design of an individual site. Future maintenance can then take this overall system in to account, which is assisted by a defined ordering system and shared vocabulary. # 28th September 2008, 11:30 pm

cascadenik: cascading sheets of style for mapnik. Great idea. Mapnik (the open source tile rendering system used by OpenStreetMap and others) has a complex style configuration based on XML. Michal Migurski has build a CSS-style equivalent which compiles down to XML, hopefully making it much quicker and easier to get started with Mapnik customisation. # 30th August 2008, 10:04 am

Why “variables” in CSS are harmful. Bert Bos thinks constants or macros in CSS will make it harder to learn. I personally think that the problem with CSS isn’t the learning curve, it’s how difficult it is to maintain later—and I see macros as a great way of reducing that maintainability burden. # 6th August 2008, 12:13 am

When Bugs Collide: Fixing Text Dimming in Firefox 2. Handy tips from Drew on fixing the glitchy text rendering in Firefox 2 when you animate opacity without breaking alpha-transparent PNGs in IE6. # 19th June 2008, 6:09 pm

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