...

View Full Version : How can you view css source?



Robin Clark
02-22-2004, 04:13 PM
I hope that this isn't a dumb question. Is it possible to view the source for an external stylesheet? How do you do this?

I know how to view the html source (right-click on the page and choose "View Source". But when the html references an external stylesheet:


<link rel="stylesheet" type="text/css" media="screen" href="layout.css">

I am most interested to see the layout.css code.

I am new to css and I feel I have only scratched the surface of this tool.

Vladdy
02-22-2004, 04:16 PM
In the address bar delete the name of the page and type in the content of the href attribute
Or
Use the Save As feature of your browser to save all page files to a local folder.

liorean
02-22-2004, 04:18 PM
The easiest way would be to use a bookmarlet such as my ViewStyles bookmarklet. Go to <http://liorean.web-graphics.com/> and drag the ViewStyles bookmarklet to your personal bar/links bar, and then click it when you want to see the external stylesheets used on a page.


Vladdy: Using the Save As feature would give you only the styles that iew understands, if that happens to be the browser you're using. Other browsers will give the real source, though.

Robin Clark
02-22-2004, 04:40 PM
For example, I go to www.robinzclark.com/header.css (http://www.robinzclark.com/header.css)

I know that this file exists because I put it there. I get the error message: "Access to the specified device, path or file is denied"

Here is the html source:

<LINK REL = "stylesheet" TYPE = "text/css" HREF = "header.css">

When I try the ViewStyles bookmarklet, I get a dialog asking me whether I want to save the program or run it. I say to run it and I get an jscript error message: "document is undefined". What am I doing wrong?

Robin Clark
02-22-2004, 04:45 PM
For example, I go to www.robinzclark.com/header.css (http://www.robinzclark.com/header.css)

I know that this file exists because I put it there. I get the error message: "Access to the specified device, path or file is denied"

Here is the html source:

<LINK REL = "stylesheet" TYPE = "text/css" HREF = "header.css">

When I try the ViewStyles bookmarklet, I get a dialog asking me whether I want to save the program or run it. I say to run it and I get an jscript error message: "document is undefined". What am I doing wrong?

liorean
02-22-2004, 04:47 PM
You should use it on the html document that uses the external stylesheet, not on the stylesheet document itself.

Robin Clark
02-22-2004, 04:55 PM
I am on the html document itself. For example, I am on http://www.freeipb.net/ibe/

I click on the Links>> in my Address bar, I choose, View Styles from the dropdown menu. Then when asked I say that I want to run the program from its location. I still get the jscript error message.

Sorry for being so dense.....

liorean
02-22-2004, 05:07 PM
Oh, wait, you probably dragged the bookmarklet source file link to your links bar instead of the actual bookmarklet. Try the link right below the title instead. You could always try it out on that page first. It should open a popup to which it writes a list of stylesheets, not open a dialogue asking whether you want to run it or save it.

Robin Clark
02-22-2004, 05:25 PM
Yes, you are right -- this is the error that I made. I have it working now and it is perfect. Just what I was looking for! This is a wonderful learning tool. Thank you so much!

pardicity3
02-22-2004, 06:21 PM
If you happen to be using Mozilla Firefox (http://www.mozilla.org/products/firefox/) (or if you're not, this would be a reason to switch!), you should check out the Edit CSS extenstion (http://extensionroom.mozdev.org/more-info/editcss). It's very cool as it not only allows you to view the css of page by merely right clicking and selecting edit css, but it also allows you to edit the css of the page and see the results instantly. There are a few hangups with the editing part, but for the most part this extension works great.

me'
02-22-2004, 07:07 PM
Originally posted by pardicity3
If you happen to be using Mozilla Firefox (http://www.mozilla.org/products/firefox/) (or if you're not, this would be a reason to switch!), you should check out the Edit CSS extenstion (http://extensionroom.mozdev.org/more-info/editcss). It's very cool as it not only allows you to view the css of page by merely right clicking and selecting edit css, but it also allows you to edit the css of the page and see the results instantly. There are a few hangups with the editing part, but for the most part this extension works great. I was thinking of linking to that, too. Great extension.

Vladdy
02-22-2004, 08:09 PM
Originally posted by Robin Clark
For example, I go to www.robinzclark.com/header.css (http://www.robinzclark.com/header.css)

I know that this file exists because I put it there. I get the error message: "Access to the specified device, path or file is denied"

Here is the html source:

<LINK REL = "stylesheet" TYPE = "text/css" HREF = "header.css">

When I try the ViewStyles bookmarklet, I get a dialog asking me whether I want to save the program or run it. I say to run it and I get an jscript error message: "document is undefined". What am I doing wrong?
Worked just fine. You may want to get a real browser, though... :thumbsup:
Oh, and since I've seen the CSS file.... do NOT use px for font size!!!

me'
02-22-2004, 08:22 PM
Originally posted by Vladdy
do NOT use px for font size!!! Because impaired users running IE won't be able to make the text bigger if it's illegible to them.

(People are shouting at us for those sort of posts, Vladdy ;))

fredmv
02-22-2004, 08:33 PM
Originally posted by me'
Because impaired users running IE won't be able to make the text bigger if it's illegible to them.That's what they get for using that piece of junk from hell. ;)

newmand2
02-22-2004, 09:43 PM
which is the most recommended way to size your fonts then? and what is the equivalent of 9, 10, 11, 12 px etc?

Robin Clark
02-22-2004, 10:57 PM
Yes, you are right -- this is the error that I made. I have it working now and it is perfect. Just what I was looking for! This is a wonderful learning tool. Thank you so much!

mindlessLemming
02-22-2004, 11:50 PM
newmand2: A popular choice, (and my personal approach) is to use em for all font sizes. The problem being that 1em is by default a bit big. To fix this, I put something like font-size:80%; in the <body>'s CSS. That way, I can set my content text to 1em, my headers to 1.5 or 2em, and things like copyright info to 0.8em.
Even IE can resize text that is styled in this manner. Even IE! :D

liorean: Viewstyles bookmarklet: Me like, cheers for that :thumbsup:

Nightfire
02-23-2004, 02:32 AM
That css extension could come in handy :)

I generally try to stay around the 0.8em for content and 0.9em for links although I do tend to switch around from site to site.

Skyzyx
02-23-2004, 08:45 PM
... or you can have multiple stylesheets which handle font sizing. Have one stylesheet for 12px (since it's the only unit of measurement that seems to remain constant across browsers/platforms), another for 14 or 15px, and one for 18 or 20px.

Use a stylesheet switcher widget (http://www.skyzyx.com/scripts/styleswap.php) on your page, and you'll be set.

IMO, this is the best way to accommodate both the readability needs of the user, and the design needs of the layout. If they need to make the text even larger/smaller, they can download a new browser (like Firefox (http://www.mozilla.org/products/firefox/)) that supports this feature properly.

me'
02-23-2004, 08:47 PM
Sadly, that's not as usable as the user's own interface. People will be used to View->Text Size->... in IE, and forcing them to use your own interface isn't the nicest thing you can do.

Skyzyx
02-24-2004, 12:04 AM
It's a balance... a tradeoff.

People have to trade freedom for security. The more security you have, the less freedom. The more freedom, the less security.

The same concept applies to design and usability. There are many well-designed, usable sites out there, but it's because they've struck a balance between the two. This is one of those instances where you have to strike a balance.

As I said before, pixels are the only unit that are reliable between browsers/platforms. This can be important in a good design. Better designs allow for flexibility in font sizes, sure, but it's not always the case.

Having a custom widget, although maybe not as usable in theory, is a good balance/compromise to handle the pitfalls of a sucky browser like IE/Win.

p.s. When is your website coming out?

swmr
02-24-2004, 12:37 AM
Originally posted by fredmv
That's what they get for using that piece of junk from hell. ;)

Originally posted by Skyzyx
... a sucky browser like IE/Win.


I like my sucky piece of junk from hell... :D:thumbsup:

ReadMe.txt
02-24-2004, 10:19 PM
correct me if i'm wrong, but surely point size is the way to go on font sizes (since em is not reliable x browser) in the display options there's an option to set how big 1pt actually is. This takes effect application wide and must be a more effecient option.

Skyzyx
02-25-2004, 02:42 AM
Points still change between Windows and Mac OS 9 Systems. Windows is set to 16px for a 12pt font, OS9 is set to 12px. Mac OS X system is set to 16px, but Safari and Camino are set to 14px. I'm not sure about Linux.

Points are NOT consistent across platforms, hence my preference for pixels and stylesheet widgets.

liorean
02-25-2004, 02:43 AM
Yes and no. Points are fixed sizes. If you specify 9 pt and the user has 12 pt as default, then the text will consistently be three fourths of the user's default. If the user on the other hand has poor vision and because of that has set the default size to 18 pt, and you use 9 pt, you are consistently using half the user's specified default. Now remember that the font size measurement is unidirectional, but the font scales bidirectional. So, in the first case a character takes nine sixteenths of the user's default font size in area, whereas in the second case the character will take one fourth of the default area. Changing the DPI will also affect the point sizes, but that effect is the same for per centages and ems.

Per centages and ems on the other hand are relative to the user's default font size (unless you override it in an ancestor), and will always keep the same proportion to them. If you specify 0.8 ems, you will get a size of four fifths, or sixteen twentyfifths in area, independent on what size the user has set as default.



Also, from an accessiblity perspective: The user's default should be considered to be what size is the minimum for legibility. No text that you want the user to be able to read should be smaller.



As a sidenote, the problems with ems are historical nowadays. The problems with inheritance, on the other hand, is unconnected to the ems.

glenngv
02-27-2004, 10:11 AM
Other way to view html/js/css source is the good ol' view-source: technique.

Just type this in the address bar:
view-source:URL of html/js/css file

You can also make it as a bookmarklet:
javascript&#58;var a=prompt('Type URL',location.href);if (a) location.href='view-source:'+a;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum