Simon Willison’s Weblog

Items tagged javascript, css

Filters: javascript × css ×


Frontend in 2017: The important parts. Keeping track of developments in the frontend and JavaScript community is pretty much a full time job here days, so I found this summary of trends and developments over 2017 very useful for trying to catch up. # 29th December 2017, 8:30 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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]

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]