Assisting the browser (CSS)

HTML & CSS
1

I’m a new website developer who’s currently learning XHTML and CSS - enjoying both their vastness and challenges. Though I haven’t read any books on HTML/CSS techniques I’m in constant debate and confusion: do I help the browser or continue writing? What I mean by this is: do I specify strict rules in a style sheet or allow the browser to do the job for me.

For example, consider the following code:

nav { border-top-width: 2px; border-top-style: dashed; border-bottom-width: 2px; border-bottom-style: dashed; }

No doubt the browser will understand these simple rules and apply the decoration. However, should I specify that there is no right or left border? Though it seems obvious these properties can be omitted, or if specified can help old browser versions (possibly?), is there any benefit besides (potential) backward-compatibility.

Also, can defining the width and height value to auto achieve any advantage?

1 Like
2

Nope, you shouldn’t really on the browser with this sort of stuff. Unfortunately, while there are standards set in place different browsers running different versions on different devices all render things slightly differently.

You’re on the right track with applying the “obvious” properties, though the heavy lifting has mostly already been done. Check out CSSReset for a comparison.

3

The default for most elements is that there is no border (apart from form controls and fieldsets and a few others) so you don’t need to specify that there are no left and right borders for normal elements like divs,p, spans,hn etc…

With borders it is actually the border-style that specifies whether a border will show and not the border-width as most people think and if you also omit the colour then you get the default color of the text as the border-color. If you omit the border-width then you get a browsers default which may vary between browsers so its best to explicitly set it yourself.

As far as older browsers goes then in the case of borders then it is the shorthand rules that have the best compatibility but as those old browsers are long dead you don’t really need to know about that :slight_smile: However 9 times out of ten it is better to to use shorthand for the border-properties anyway because it is less code.

nav {
    border-top:2px dashed #000;
    border-bottom:2px dashed #000;
}

Remember that when you use a shorthand rule you reset all the values for that property.

e.g. ‘background:red’ would remove any background image or other background values set on the background property.

Generally width and height are ‘auto’ by default so there is no need to define them and indeed for elements that hold fluid content you want to avoid height like the plague. Auto width also means different things depending on what properties have been set for the element.

For a normal div an ‘auto width’ means just take up all the available horizontal space in the containing block. However if the element is absolutely positioned, display:inline-block, display:table or floated then auto-width is a shrink to fit algorithm and will only encompass the content and no more.

As mentioned above most people use some sort of reset stylesheet to get browsers on an even keel before you start so google css resets and normalise for more info.

In the end it is a mater of learning and understanding about the elements that you are using and the properties that you are setting and taking control out of the hands of the UA and into your own sweaty palms :smile: .

1 Like
4

If you don’t need left and right borders, there’s no use really in telling the browser not to include them. Just don’t declare them. Something like this would be fine:

div {
  border-top: 2px dashed red;
  border-bottom: 2px dashed red;
}

Working example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
  width: 200px; height: 100px;
  border-top: 2px dashed red;
  border-bottom: 2px dashed red;
}

</style>
</head>
<body>

<div></div>

</body>
</html>

EDIT: Ninjad by Paul. :smiley:

5

Thank you all for the replies: you’ve cleared my misconceptions which can only better my learning and understanding! Truly appreciated.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.