157 items tagged “css”
2009
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.
Equidistant Objects with CSS. Handy tip; I needed to do this recently and ended up setting everything using pixels. This works much better.
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.
"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.
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.
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.
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.
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.