202 posts tagged “css”
2009
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.
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.
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.
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.
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.
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.
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.
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.
TiddlyPocketBook. Paul Downey took Nat’s dinky pocketbooks CSS and combined it with TiddlyWiki to create a single page pocketbook editor.
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.
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.
Practical, maintainable CSS (via) Nat’s posted slides and a video from her latest talk at last week’s Brighton Girl Geeks evening.
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.
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.
FireScope. Neat little Firefox / Firebug extension which adds a “Reference” tab showing documentation for the selected element from the comprehensive SitePoint Reference site.
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.
2008
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) }
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.
24 ways: User Styling. The web geek advent calendar is up and running again this year, with a striking new design.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.