Just wanted to share how I organize my CSS rules. The sample below shows how I order the different declarations if they happened to all be there. So I would never have a
width declared before a
position for example.
I haven't kept the "clockwise" order for the positioning for elements. I guess it happened because I use
top and
left the most.
selector {
clear
float
position
top
left
bottom
right
z-index
margin
padding
width
height
display
overflow
border
background
font
text-decoration
letter-spacing
line-height
/* opacity through JavaScript */
/* border corner radius through JavaScript */
}I don't like using PNGs to get a rounded corner effects, I simply find it too messy and time consuming. The only good thing about it is you can get the "boxes" to display 100% as you intended them to.
The other best way to do it is by using the
jQuery corner plug-in. It will create a rounded corner with the
canvas HTML 5 element which has a background of whatever the CSS background is and a rounded edge of the same colour as the CSS border. This will look fine as long as the element behind it has a plain background as well, meaning you can't have a picture behind it otherwise you'll end up with a squared box with rounded borders running along the "inside" instead of a rounded box; of course that's only on Internet Explorer.
It's not until recently that I find out that CSS3 is working towards making a
border-radiusselector {
border-radius: 10px;
}It was great and all, but it's not quite implemented by browsers yet, so it was pretty much useless to me. So I went about modifying the stylesheet with firebug and then I mistyped something and firebug
autocompleted -moz-border-radius. Seeing that I quickly hit the tab key and entered a value, and the corners were round! I took a look around Google and I found that
WebKit also has
-webkit-border-radius.
selector {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}No dice, it worked and all but only for Mozilla and WebKit based browsers, and it's not
valid CSS. So I threw it into a JavaScript file and have it handle everything.
function corner(aElem, aRadius) {
if ($.browser.mozilla)
$(aElem).css('-moz-border-radius', aRadius);
else if ($.browser.safari)
$(aElem).css('-webkit-border-radius', aRadius);
else
$(aElem).corner(aRadius);
}I use jQuery to check if it's Mozilla or Safari browsers and apply a
style property to the element, otherwise use the
corner plugin to place the canvas.
Another issue I had with validation was the
opacity. CSS3 is working towards a
opacity, although it may work on some browsers. So I threw this into my CSS:
selector {
opacity: 0.2; /* CSS3 */
-moz-opacity: 0.2; /* Old Mozilla */
-khtml-opacity: 0.2; /* KHTML Engine */
filter: alpha(opacity=20); /* IE5 - IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; /* IE 8 */
}It works well and my elements have a transparency in them, but it doesn't validate and my file comes out with errors, so again I turn to JavaScript & jQuery:
$(...).css({opacity: 0.2});I also leave a commented line in the CSS file for those elements that have rounded corners or opacity as indicated in my first sample above. It's good to have it there for reference.
