Css Tricks

CSS TRICKS
The characteristics of block elements include:
• Always begin on a new line

• Height, line-height and top and bottom margins can be manipulated
• Width defaults to 100% of their containing element, unless a width is
specified
Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and
<li>. Inline elements on the other hand have the opposite
characteristics:
• Begin on the same line

• Height, line-height and top and bottom margins can't be changed
• Width is as long as the text/image and can't be manipulated
Examples of inline elements include <span>, <a>, <label>, <input>,

<img>, <strong> and <em>.
To change an element's status you can use display: inline or display: block.
But what's the point of changing an element from being block to inline, or
vice-versa? Well, at first it may seem like you might hardly ever use this, but
in actual fact this is a very powerful technique, which you can use any time
you want to:
• Have an inline element start on a new line

• Have a block element start on the same line
• Control the width of an inline element (particularly useful for
navigation links)
• Manipulate the height of an inline element
• Set a background colour as wide as the text for block elements,
without having to specify a width
2. Another box model hack alternative

The box model hack is used to fix a rendering problem in pre-IE 6 browsers
on PC, where by the border and padding are included in the width of an
element, as opposed to added on. A number of CSS-based solutions have
been put forward to remedy this, so here's another one which we really like:
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
The first width command is read by all browsers; the second by all browsers
except IE5.x on PC. Because the second command comes second it
takes precedence over the first - any command that comes second will
always override a preceding command. So, how does all this work?
By placing empty comment tags (/**/) before the colons, IE5.0 will ignore the
command. Likewise, by placing these empty comment tags after the colon,
IE5.5 will ignore the command. By using these two rules in conjunction with
each other, we can hide the command from all of IE5.x.
3. Minimum width for a page
A very handy CSS command that exists is the min-width command, whereby
you can specify a minimum width for any element. This can be particularly
useful for specifying a minimum width for a page.
Unfortunately, IE doesn't understand this command, so we'll need to come

up with a new way of making this work in this browser. First, we'll insert a
<div> under the <body> tag, as we can't assign a minimum width to
the <body>:
<body>
<div id="container">
Next we create our CSS commands, so as to create a minimum width of

600px:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
The first command is the regular minimum width command; the second is a
short JavaScript command that only IE understands. Do note though, this
command will cause your CSS document to invalidate so you may prefer to
insert it into the head of each HTML document to get round this.
You might also want to combine this minimum width with a maximum width:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" :
document.body.clientWidth > 1200? "1200px" : "auto");
}
4. IE and width & height issues
IE has a rather strange way of doing things. It doesn't understand the min-
width and min-height commands, but instead interprets width and height as
min-width and min-height - go figure!
This can cause problems, because we may need boxes to be resizable should
more text need to go in them or should the user resize text. If we only use
the width and height commands on a box then non-IE browsers won't allow
the box to resize. If we only use the min-width and min-height commands
though then we can't control the width or height in IE!
This can be especially problematic when using background images. If

you're using a background image that's 80px wide and 35px high, then you'll
want to make sure that the default size for a box using this image is exactly
80 x 35px. However, if users resize the text then the box size will need to
expand gracefully.
To resolve this problem, you can use the following code for a box with
class="box":
.box
{
width: 80px;
height: 35px;
}
html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
All browsers will read through the first CSS rule but IE will ignore the second
rule because it makes use of the child selector command. Non-IE browsers
will read through the second one and will override the values from the first
rule because this CSS rule is more specific, and CSS rules that are more
specific always override those that are less specific.
5. Text-transform command
One of the lesser known, but really useful CSS commands is the text-
transform command. Three of the more common values for this rule are:
text-transform: uppercase, text-transform: lowercase and text-transform:
capitalize. The first rule turns all characters into capital letters, the second
turns them all into small letters, and the third makes the first letter of each
word capitals.
This command is incredibly useful to help ensure consistency in style

across an entire website, particularly if there a number of content editors.
Say for example your style guide dictates that words in headings must
always begin with capital letters. To ensure that this is always the case, use
text-transform: capitalize. Even if site editors forget about the capitalisation,
their mistake won't show up on the website.
It's also preferable to use text-transform: uppercase to capitalise

words, as screen readers may pronounce shorter words in capital letters as
acronyms. A great example of this is ‘CONTACT US’, which is pronounced as
‘contact U S’ by some screen readers.
6. Disappearing text or images in IE?
IE has a very strange bug where text or background images sometimes

disappears from sight. These items are still actually there, and if you
highlight everything on screen or hit refresh they'll often re-appear. Kind of
strange, huh?
This problem mostly occurs on background images and on text next to a

floated element. To remedy the problem, simply insert position: relative
into the CSS command for the disappearing element, and for some bizarre
reason that'll usually fix the problem. If this doesn't work (it sometimes
doesn't), assign a width to the offending element in the CSS and that should
fix the problem.
7. Invisible text
Sometime you may actually want to make text invisible. Invisible text can be
especially useful for screen reader users, perhaps to assign a label to a
form item or insert a heading ahead of a section. Don't want to change the
visual appearance by inserting these? Make them invisible and no one using
a visual browser knows that they're there.
You may also want to make text invisible if using a print or handheld CSS
file, as some information may not need to be displayed on either of these
mediums (see below for more on this).
To make text invisible you can use display: none - easy! This works fine for
hiding text from handhelds (if CSS is supported) and printed web pages, but
isn't so great for many screen readers. Screen readers are now becoming too
clever for their own good, and some will actually ignore the any text that has
the rule display: none assigned to it.
For screen readers users therefore, a new approach is needed: position:

absolute; left: -9000px. This basically takes the text and positions it 9000px
to the left of the left edge of the screen, essentially making it invisible.
8. CSS document for handhelds
A separate CSS document can be created for PDAs and mobile phones, and
only activated when one of these devices is being used to access your site.
More and more websites are creating separate CSS documents for
printing, so web pages automatically become print-friendly when users
choose to print them. You can also do the same for handheld devices.
The following command is used to call up the CSS document for handhelds:
<link type="text/css" rel="stylesheet" href="handheldstyle.css"

media="handheld" />
CSS commands in the handheld CSS file override any equivalent commands
in the main CSS document. So, what commands should you place in this file?
Ideally, you want handheld web users to avoid having to scroll across. To
test this, open up your website in a regular browser window and resize it to
150px in width. Then, open up your main CSS file and insert some new
commands at the very bottom of the document. The commands you place
here should adjust the layout of the website so that it doesn't require
horizontal scrolling at a 150px width. Then, open up a new document, cut
and paste these new commands over, and save it as handheldstyle.css (or
whatever name you want to give it).
What your website offers to handheld web users should be quite different to
what it offers on traditional web browsers, as the user experience is quite
different. For further information, a book such as Handheld Usability is a
great read.
9. 3-d push button effect
Back in the early days of the web, 3-d buttons that appeared to become
pushed in when moused over were all the rage. At that time, this could only
be achieved through images and JavaScript, but now with the advent of CSS
we can go all retro and re-create this effect:
The main CSS commands you'll need are:
a{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
Aside from these commands, you can insert any other commands to achieve
the desired presentation effect - the only limit is your imagination!
10. Same navigation code on every page
Most websites highlight the navigation item of the user's location in the
website, to help users orientate themselves. This is a fundamental
requirement for basic usability, but can be a pain as you'll need to tweak the
HTML code behind the navigation for each and every page. So can we have
the best of both worlds? Is it possible to have the navigation highlighted
on every page, without having to tweak the HTML code on each and
every page? Of course it is...
First of all, you'll need to assign a class to each navigation item:
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>
You'll then need to insert an id into the <body> tag. The id should be
representative of where users are in the site and should change when users
move to a different site section. When in ‘Home’ it should read <body
id="home">, in ‘About Us’ it should be <body id="about"> and in ‘Contact
Us’ <body id="contact">.
Next, you create a new CSS rule:
#home .home, #about .about, #contact .contact

{
commands for highlighted navigation go here
}
This basically creates a rule that only takes effect when class="home" is
contained within id="home", and when class="about" is in id="about" and
class="contact" is in id="contact". These situations will only occur when the
user is in the appropriate site section, seamlessly creating our highlighted
navigation item.
VENKATA VARA PRASAD K
Configuration Engineer

Css Tricks

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Tricks

Uploaded by

Copyright:

Available Formats

CSS TRICKS

The characteristics of block elements include:

• Always begin on a new line

• Begin on the same line

Examples of inline elements include <span>, <a>, <label>, <input>,

• Have an inline element start on a new line

2. Another box model hack alternative

3. Minimum width for a page

Unfortunately, IE doesn't understand this command, so we'll need to come

Next we create our CSS commands, so as to create a minimum width of

4. IE and width & height issues

This can be especially problematic when using background images. If

This command is incredibly useful to help ensure consistency in style

It's also preferable to use text-transform: uppercase to capitalise

6. Disappearing text or images in IE?

IE has a very strange bug where text or background images sometimes

This problem mostly occurs on background images and on text next to a

For screen readers users therefore, a new approach is needed: position:

8. CSS document for handhelds

<link type="text/css" rel="stylesheet" href="handheldstyle.css"

The main CSS commands you'll need are:

10. Same navigation code on every page

Next, you create a new CSS rule:

#home .home, #about .about, #contact .contact

VENKATA VARA PRASAD K

You might also like