Random Musings

April 26, 2009

IE 8 Tips : Add new attribute on the fly

Filed under: IE Developer Toolbar — haditeo @ 9:03 am

Recently most of my tasks are revolving against modifying CSS style either by using CSS or by using Javascript. I used to utilize IE 7 with IE developer toolbar until i found out IE 8 with the built in IE Developer Toolbar. I was so fascinated with the IE Developer Toolbar of IE 8. For your information, in IE 7, there is no built in IE Developer Toolbar.

I will show you how to add a custom attribute for the particular HTML tag on the fly.

1) I load up http://www.csszengarden.com . By the way, i like this site very much because it shows the powerful feature of changing the site design with just using CSS

add-new-attribute

2) Once you open a site, press “F12” and you will be presented with the Toolbar window.
3) Click on the “CSS” tab. There are 4 tabs which are “HTML”, “CSS”, “Script”, “Profiler”
4) Let’s try to give a “box” around the “P” tag. Now this is the difficult part.  In the screenshot, there are 3 attributes of the “P” tag, try to right click in one of the attribute. If you are succeed,  you will be presented with the small window containing “Add Attribute”

right-click
5)Just now i add the custom attribute “border-style:solid”. Make sure that it’s checked and you will instantly see that your custom attribute is directly applied on the page itself.

Summary
This toolbar is very useful for the testing purposes. Let’s say you would like to test whether some CSS style rules or attributes can be applied correctly to certain HTML tag, you can use this toolbar to test it further.

You can even change the existing attribute by just directly edit the attribute and you can even temporarily disable certain CSS rule or attribute.

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: