Changing the Look of the Web with Stylebot
September 21st, 2010 | Published in Google Open Source
Stylebot editing the Open Source Blog in advanced mode
Stylebot editing the Open Source Blog in basic modeCascading Style Sheets (CSS) are a part of every web designer’s vocabulary when styling websites, and since its inception, the C (Cascading) in CSS was intended as a way to empower users to have the final say over how they perceive content on the web. But because creating user stylesheets generally requires programming, end users have not always been able to easily leverage this functionality. Stylebot, a new Google Chrome extension created as a Google Summer of Code project, hopes to finally unlock the power of the C in CSS by giving the end user final control on how web content is displayed.
At Google, the Accessibility Engineering team is very excited about the potential of extensions like Stylebot to improve the accessibility of the web, making it possible for users to customize the web to fit their needs. For example, a Stylebot user with special reading needs might change a webpage by removing images, picking new text and background colors, and even moving blocks of text around. And Stylebot saves the custom style they create, so the next time they access that page the changes will still be there. Even better, they can sync their saved styles across computers so that webpage will always appear with their preferred style.
We invited Ankit Ahuja, the Google Summer of Code student who worked on Stylebot, to write about his experiences creating the extension. While there’s still a lot of work to be done to make Chromium more accessible, extensions like Stylebot are a great step - giving users themselves the power to shape the way they interact with the web.
My name is Ankit Ahuja, and I successfully completed my Google Summer of Code project this year for Chromium. I was mentored by Rachel Shearer. My project is Stylebot, a Chromium extension that enables users to easily customize the web’s appearance. Ultimately, Stylebot aims to make the web more accessible and adaptable.By Ankit Ahuja, 2010 Google Summer of Code Student and Rachel Shearer, Google Accessibility Engineering Team
StyleBot screencast demo
One of the main objectives of the project was to allow users unfamiliar with CSS to be able to use this extension with ease. In the Basic mode, users launch Stylebot on a page, select an element and style it. Changes made by the users are automatically saved, so the next time they visit the page, their custom styles are already applied. This mode provides an easy-to-use GUI for the commonly used CSS properties. For the more advanced users, there is a separate mode in which they can write their own CSS.
A nontrivial problem was allowing the users to preview the changes instantly. So although a stylesheet is used to apply the custom CSS when the page is initially loaded, inline CSS is deployed while the user is in editing mode for a smooth, dynamic editing experience. Another important issue was determining the best way to position the Stylebot panel on the page. During testing, I found drag-and-drop to be slow. Instead, allowing the panel to be moved to a fixed left or right position felt the most user friendly. CSS parsing was required and luckily there already existed a CSS parser in JavaScript.
On my part, I’ve tried to make sure the Stylebot code is useful for other developers. I’ve kept the implementation of features like extension data synchronization, selection of elements, CSS selector generation, etc. separate, so that anyone can reuse the code easily. I’ve also used code from other open source projects. For example, the user interface is the CSS version of Cappuccino’s Aristo and the selection of elements is similar to Firebug’s implementation.
Take a look at a few examples we created using Stylebot. You can install the extension from the Google Chrome extensions gallery. We’re already receiving some positive and critical feedback, which is exciting!
I had an amazing experience participating in Google Summer of Code this year. I had a great time interacting with my mentor through the summer, who was very helpful and motivating. Finally, I would like to thank Google for sponsoring and making this project possible.