OpenID104 items tagged “css”
Visualizing WebKit’s hardware acceleration. Command line flags for launching Safari (and the iOS simulator) in a way that highlights areas of the screen that are being hardware accelerated—particularly useful if you are using the “-webkit-transform: translate3d(0,0,0)” trick. 
27th June 2011, 10:31 am
Qwery—The Tiny Selector Engine. A quarter of the size of Sizzle (1K gzipped and minified) due to only supporting ID, class and attribute selectors. Could be useful for things like embeddable widgets and badges, where depending on a larger library is impolite. 
2nd April 2011, 8:27 am
Paper 5 | Scribd (via) A more impressive example of Scribd’s new HTML/CSS document viewer: a mathematics-heavy LaTeX paper by one of Scribd’s engineers. 
7th May 2010, 12:12 pm
Scribd in HTML5. Outstanding piece of engineering work from Scribd—they can now render documents using HTML, webfonts and a ton of CSS absolute positioning (using ems rather than pixels) instead of Flash. Nothing to do with HTML5 of course, which is rapidly replacing Ajax as the most mis-applied terminology on the Web. That nit-pick feels pretty insignificant compared to their overall achievement though—being able to convert any formatted document (.doc, pdf etc) in to HTML and CSS that displays correctly is a real leap forward. 
7th May 2010, 12:09 pm
Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5. Great demo, though calling -webkit-animation HTML5 (or even CSS3) is a bit of a stretch... 
4th May 2010, 7:27 pm
Plugging the CSS History Leak (via) Firefox is fixing the nefarious CSS visited link colour history leak flaw, which currently affects all browsers and allows a malicious site to determine if you have visited a specific site by checking getComputedStyle against a link to that page. It’s an obtrusive but necessary fix—visited link styles will be restricted to colour and border styles (no background images and hence no more checkbox effects since the image request could leak information) and those colours will not be reported via getComputedStyle. I hope other browser vendors follow suit. 31st March 2010, 8:01 pm
Going Nuts with CSS Transitions. Nat’s article for this year’s 24ways—adding special effects to images using CSS rotation, box shadows and the magical -webkit-transition property. 14th December 2009, 1:16 pm
jQSlickWrap. Clever jQuery plugin which allows text to wrap around irregularly shaped images, by processing the image with canvas and rewriting it as a sequence of floated horizontal bars of different widths. It’s a a modern variant of the the ragged float trick first introduced by Eric Meyer. 
23rd November 2009, 7:44 am
How to Make a US County Thematic Map Using Free Tools. This is the trick I’ve been using to generate choropleths at the Guardian for the past year: figure out the preferred colours for a set of data in a Python script and then rewrite an SVG file to colour in the areas. I use ElementTree rather than BeautifulSoup but the technique is exactly the same. The best thing about SVG is that our graphics department can export them directly out of Illustrator, with named layers and paths automatically becoming SVG ID attributes. Bonus tip: sometimes you don’t have to rewrite the SVG XML at all, instead you can generate CSS to colour areas by ID selector and inject it in to the top of the file. 
12th November 2009, 10:49 am
It’s interesting to me how much [Closure] feels like a more advanced version of Dojo in many ways. There’s a familiar package system, the widgets are significantly more mature, and Julie and Ojan’s Editor component rocks. The APIs will feel familiar (if verbose) to Dojo users, the class hierarchies seem natural, and Closure even uses Acme, the Dojo CSS selector engine.
— Alex Russell 
6th November 2009, 7:35 am
CSS 3: Progress! Alex Russell on the new exciting stuff going in to CSS 3 based on real-world implementations in the modern set of browsers. Of particular interest is the new Flexible Box specification, which specifies new layout primitives hbox and vbox (as seen in XUL) and is already supported by both WebKit and Gecko. 22nd August 2009, 11:52 am
Modernizr (via) Neat idea and an unobtrusive implementation: a JavaScript library that runs feature tests for various HTML5 features (canvas, box shadow, CSS transforms and so on) and adds classes to the HTML body element, allowing you to write CSS selectors that only apply if a feature is present. Detected features are exposed to JavaScript as boolean properties, e.g. Modernizer.multiplebgs. 2nd July 2009, 10:56 am
To Sprite Or Not To Sprite. CSS sprite images are decompressed to full bitmaps by browsers before they are rendered, so sprite files with large numbers of pixels will dramatically increase the memory footprint of your site. 24th June 2009, 10:33 am
Styling buttons to look like links. Nat has a neat trick for styling submit buttons to look like regular links—so there’s absolutely no excuse for using a “delete” link when you should be using a POST request. 10th June 2009, 2:11 am
TiddlyPocketBook. Paul Downey took Nat’s dinky pocketbooks CSS and combined it with TiddlyWiki to create a single page pocketbook editor. 28th May 2009, 1:24 am
Dinky pocketbooks with WebKit transforms. Nat used 90 degree CSS transform rotations in print stylesheets for WebKit and Safari to create printable cut-out-and-fold pocketbooks from A4 pages. Very neat. 22nd May 2009, 12:33 am
10 Cool Things We’ll Be Able To Do Once IE6 Is Dead. Highlights include child and attribute selectors, 24bit PNGs and max-width and min-width. Simple pleasures, but I can hardly wait. 15th April 2009, 2:17 pm
Practical, maintainable CSS (via) Nat’s posted slides and a video from her latest talk at last week’s Brighton Girl Geeks evening. 12th March 2009, 12:46 am
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
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]
