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