CSS Editor bookmarklet for IE

Posted on Thursday, 29 November 2007 by Steve Faulkner

For times when CSS styles need to be tested, on the fly, in Internet Explorer, the CSS editor bookmarklet can come in handy. It was originally developed from the test styles bookmarklet by Jesse Ruderman. When Internet Explorer 7 came along it ceased to work, but after much fiddling around I was able to get it working in IE 7. The CSS editor has the same functionality as the “test styles” function on the Web Accessibility Toolbar.

CSS editor bookmarklet window

What The CSS Editor bookmarklet does

  • When activated it opens in a new window
  • If it can find any style sheets in current page it will list the style rule names in a select list.
  • Choose a style rule to edit by selecting an item from the list and pressing the edit button. The style rules will be inserted into the edit area.
  • Edit the rules and press the update button, the changes will be applied to the page.
  • Modified rules within the edit area can be applied to other pages on the same site by pressing the update button once a page has loaded.
  • Remove the changed styles by pressing the clear button.
  • Close the editor by pressing the close button.

Limitations

  • It’s a bit clunky
  • Works in Internet Explorer only.
  • Pop up blockers must be turned off for it to function.
  • Does not work on framed pages.
  • Does not list @import style sheet rules. You can still edit style rules that are not listed by pasting them into the edit area.
  • Although it can be used on local files, needs an internet connection to work.

What has it got to do with accessibility?

It’s keyboard accessible. It can be used to tweak colours on sites so sufficient contrast examples can be provided. Example focus rules can also quickly be applied to demonstrate clear indications of focus on links. Relative units can be applied to text and other page elements, Amongst other things.

Add the CSS Editor Bookmarklet

CSS editor (right click and Add to favorites…)


About Steve Faulkner

Steven is the Senior Web Accessibility Consultant and Technical Director, TPG Europe. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C HTML Working Group and the W3C Protocols and Formats Working Group. He is an editor of several specifications at the W3C including HTML 5.1, Using WAI-ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains www.HTML5accessibility.com

Recent Posts

See all posts in the blog archive

I am thrilled to hear that TPG will be part of the state blanket contract allowing our agencies to use your unique expertise and broad knowledge of accessibility. This is a bright day for citizens of the Commonwealth of Massachusetts.

Sarah Bourne, Director of Assistive Technology – IT Division, Commonwealth of Massachusetts