CSS Editor bookmarklet for IE

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.

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…)

Categories: Technical
Tags:

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.