Popular Posts
-
MailShadowG is an application that will allow you to sync Outlook with Gmail. MailShadowG is a product of Cemaphore Systems , a California b... -
Dark designs can be really stunning. I mean, really . In Web 2.0 designers try to do their best to impress their visitors and in many cases ...
-
"Coming soon" pages are a great way to tide over your visitors until you finish your new website. They can be used as a teaser fo...
-
It’s quite easy to get stuck in creativity blocks, but it’s damn hard to get out of them. Particularly if you are out of time and don’t want...
-
If you are like me then, you definitely enjoy a good advertisment and also spread the word about that product or service. Even if is about c...
-
The Indian finance ministry has begun a public competition to select a design for the symbol of ...
-
BADGES Web 2.0 Badges - A set of free badges to download and use in your own designs. Fresh Badge - Quickly generate your own badge. adClu...
-
We can all learn a lot from what those around us are doing. One thing I tell the clients I work with is if you can’t lead, then follow a lea...
-
I have used every one of these resources as a graphic designer and website developer and have hand picked all of these resources based on th...
-
Navigation menus have really important role in any website. For big sites full with a lot of pages and articles, drop down menus and tabs ar...
CSS Tips
Sunday, April 1, 2007
1. Color shortcuts and color conversions
In CSS, you can write color values in a variety of ways, e.g. "RGB(0,0,0)", "black", and "#000000" all result in black. However, you can also use a shortcut for hexadecimal values that follows this form: "#000". #0BC for example means #00BBCC but is a little quicker to write.
Sometimes when you need to feed color values into forms, e.g. for tools such as Google AdSense where you can define a border and background color, you need to provide hexadecimal values only. However, as you may want to mirror an existing RGB value in your CSS file, you need a color converter. Some years ago I created desktop tool WebCol to convert between the different CSS color formats and I'm still using it for those occasions... and there are also online converters.
2. CSS bug hunting
Your stylesheet doesn't seem to do what you want it to do? There's a variety of approaches you can use to debug the problem now:
In CSS, you can write color values in a variety of ways, e.g. "RGB(0,0,0)", "black", and "#000000" all result in black. However, you can also use a shortcut for hexadecimal values that follows this form: "#000". #0BC for example means #00BBCC but is a little quicker to write.
Sometimes when you need to feed color values into forms, e.g. for tools such as Google AdSense where you can define a border and background color, you need to provide hexadecimal values only. However, as you may want to mirror an existing RGB value in your CSS file, you need a color converter. Some years ago I created desktop tool WebCol to convert between the different CSS color formats and I'm still using it for those occasions... and there are also online converters.
2. CSS bug hunting
Your stylesheet doesn't seem to do what you want it to do? There's a variety of approaches you can use to debug the problem now:
- Make sure your HTML validates Validation is the basis for the actual debugging process, because if you have an open tag somewhere, the whole file may be screwed So jump to the W3C HTML validator and do a quick check if every element is in place
- Make sure you're running the CSS in compliant mode. Many browsers support two rendering modes; a backwards compliant "quirks mode" and a "standards compliance mode।" For example, in Firefox you can right-click any HTML page and select "View page info" to check the render mode value. If you are having CSS problems, don't even start to tweak and debug before you've ensured you're running in the standards compliance mode (e.g. having a Strict doctype in your HTML ensures this).
- Use a deeper selector। Sometimes, the styling you want to achieve is overridden by another selector somewhere else in the CSS file you're working on (or another CSS file). A quick fix is to use a deeper selector – e.g. "body div#foo .bar { ... }" instead of just ".bar { ... }" to give your current styling more importance in the cascading.
- Confused about the box model you're currently working with? CSS can get confusing if you're working with deeply nested HTML elements। One quick visualization of what you're actually looking at is to use something like "div { border: 2px dotted red; }" to give every div element on the page a red border, and then refresh the HTML page (you want to remove the border after you found the bug, of course).
- Someone told you your page is broken on Mac Safari... but you run Windows! How do you check how well your CSS file works in different browsers, different browser versions, and different operating systems? One easy way is to use BrowserPool. This little free download lets you select from a variety of OS's and browser versions, and you can then upload your (trade-secret-cleansed!) HTML to your server to give it a quick check through the eyes of this "virtual PC."
3. Center the thing
You'll often want to have a "page"- or "content"-class div to center everything. One way to do so is to use "margin-left: auto; margin-right: auto; position: relative". You can even use absolutely positioned layers inside this div.
You'll often want to have a "page"- or "content"-class div to center everything. One way to do so is to use "margin-left: auto; margin-right: auto; position: relative". You can even use absolutely positioned layers inside this div.
4. Quick 'n' dirty rounded box corners
If you want to have a very quick way to give something rounded corners, and you don't really care if the effect is lost on some browsers, you can use a definition like the following: "-moz-border-radius: 8px". It's a Firefox thing that's playing around with CSS3, but it only takes a couple of seconds to write, and if the effect is not important to the overall layout – and you don't mind that the borders aren't anti-aliased – I think it's better than nothing (for example, I use it at the "Game Over" dialog of this game, where I don't consider the rounded borders crucial in any way).
If you want to have a very quick way to give something rounded corners, and you don't really care if the effect is lost on some browsers, you can use a definition like the following: "-moz-border-radius: 8px". It's a Firefox thing that's playing around with CSS3, but it only takes a couple of seconds to write, and if the effect is not important to the overall layout – and you don't mind that the borders aren't anti-aliased – I think it's better than nothing (for example, I use it at the "Game Over" dialog of this game, where I don't consider the rounded borders crucial in any way).
5. CSS hacks
A CSS hack basically means you're trying to "split" a portion of your stylesheet to target a specific (e.g. broken!) browser. There are many of these hacks around – maybe you want to target IE5+ with something, or maybe you want to target everything but Firefox 2, and so on. One way to search for new hacks is to go to Google Code Search and use the query lang:css hack. You'll quickly find some inspiration. But don't let the dark side of the force corrupt you, Luke...
A CSS hack basically means you're trying to "split" a portion of your stylesheet to target a specific (e.g. broken!) browser. There are many of these hacks around – maybe you want to target IE5+ with something, or maybe you want to target everything but Firefox 2, and so on. One way to search for new hacks is to go to Google Code Search and use the query lang:css hack. You'll quickly find some inspiration. But don't let the dark side of the force corrupt you, Luke...
Comments[ 0 ]
Post a Comment