CSS tricks and hacks – Latest top ten useful tips

CSS can be complex, and as each new browser version is released, you may well find yourself struggling to keep up with the latest tips and hacks. But those tips and hacks will save your sanity! Here, I’ve put together the ten tips that I find most helpful, to save you the hassle of scrounging around the Web for solutions when time is tight.

1. BLOCK VS. INLINE LEVEL ELEMENTS

Nearly all HTML elements are either block or inline elements. 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>. The characteristics of inline elements, on the other hand, are the opposite of block elements:

  • 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 trick, but in actual fact, this is a very powerful technique, which you can use whenever 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, whereby the border and padding are included in, rather than added onto, the width of an element. A number of CSS-based solutions have been put forward to remedy this; here’s another one that I 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, we instruct IE5.0 to ignore the command. Likewise, if we place empty comment tags after the colon, IE5.5 will ignore the command. Using these two rules in conjunction with each other, we can hide the command from all of IE5.x browsers.

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 functionality 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 class="container">

Next, we create our CSS commands, 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, that this command will cause your CSS document to become invalid; you may prefer to insert it into the head of each HTML document to get around 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 AND 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 we need to fit more text into them, or should the user resize the text. If we use only the width and height commands on a box, non-IE browsers won’t allow the box to resize. If we only use the min-width and min-height commands, though, 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, 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, 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, which 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: uppercasetext-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 a capital letter.

This command is incredibly useful to help ensure consistency in style across an entire Website,  particularly if it has 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 exhibits a very strange bug whereby text or background images sometimes disappear from sight. These items are still actually present 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 positioned 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 (and sometimes, it doesn’t), assign a width to the offending element in the CSS — that should fix the problem.

7. INVISIBLE TEXT

Sometimes, 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 elements? Make them invisible, and no one using a visual browser will know 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 any text that has the rule display: none assigned to it.

Therefore, for screen readers users, 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 activated only 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 do the same for handheld devices.

The following command is used to call up the CSS document for handheld:

<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 users of handheld devices to avoid having to scroll horizontally.

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 width of 150px. 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).

Your Websites offering to users of handheld devices should be quite different to its offering to traditional Web browsers, as the user experience is quite different on a handheld device. For further information, a book such as Handheld Usability , by S.W. Weiss, 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 retro and re-create this 3-d 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 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 relating to each user’s location within the Website, to help users orientate themselves. This is a fundamental requirement for basic usability, but it can be a pain: we need to tweak the HTML code behind the navigation for each and every page. 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 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 located in the site, and should change when users move to a different site section. When on the ‘Home’ page, it should read <body id="home">, in ‘About Us’, it should read <body id="about">, and in ‘Contact Us’, <body id="contact">.

Next, you create a new CSS rule:

#home .home, #about .about, #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 section of the site,  seamlessly creating our highlighted navigation item.

Posted by: Dhiraj kumar

An Awesome CSS3 Animated Dropdown Menu

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs.

In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.  This is something I wished to do for a while and I finally made it. I just added support for smartphones / mobile devices and fixed the navigation for iPad and iPhone also.

css3-animated-dropdown-menu-preview

Here’s a quick preview for the CSS3 animated dropdown menu that we’re going to create today:

css3-menu-animation

The HTML

The HTML structure hasn’t changed at all, simple and minimal. Here’s an excerpt:

<ul id="menu">
        <li><a href="#">Home</a></li>
        <li>
                <a href="#">Categories</a>
                <ul>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">Graphic design</a></li>
                        <li><a href="#">Development tools</a></li>
                        <li><a href="#">Web design</a></li>
                </ul>
        </li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
</ul>

The CSS

I revised and improved the styles in order to create this unique CSS3 animated dropdown menu. So, below you can find the commented pieces of styles:

Mini reset

Reset the default ul styles.

#menu, #menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
}

Main level

The #menu is basically the main ul for this menu. CSS3 things like gradientsshadows and rounded corners help us to create the below:

css3-menu-wrapper

#menu {
        width: 960px;
        margin: 60px auto;
        border: 1px solid #222;
        background-color: #111;
        background-image: linear-gradient(#444, #111);
        border-radius: 6px;
        box-shadow: 0 1px 1px #777;
}

Clear floats

Here is Nicolas Gallagher‘s clearing method I’ve been using lately:

#menu:before,
#menu:after {
        content: "";

        display: table;
}

#menu:after {
        clear: both;
}

#menu {
        zoom:1;
}

List elements

css3-menu-elements

Please notice the #menu li:hover > a  selector. This is perhaps the most important CSS trick for this CSS3 dropdown menu.

So, this is how this works: Select an “a” element that is child of a “li” ; the “li” element must be a descendant of the “#menu”. Read more here.

#menu li {
        float: left;
        border-right: 1px solid #222;
        box-shadow: 1px 0 0 #444;
        position: relative;
}

#menu a {
        float: left;
        padding: 12px 30px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
        color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
        color: #fafafa;
}

Submenus

With CSS3 transitons we can animate changes to CSS properties like margin or opacity. This is very cool and I’ve used this for animating the CSS3 sub-menus. The result is great if you ask me:

css3-menu-animation

#menu ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 1;
        background: #444;
        background: linear-gradient(#444, #111);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        border-radius: 3px;
        transition: all .2s ease-in-out;
}

#menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
}

#menu ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
        box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
        box-shadow: none;
}

#menu ul a {
        padding: 10px;
        width: 130px;
        _height: 10px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
}

#menu ul a:hover {
        background-color: #0186ba;
        background-image: linear-gradient(#04acec, #0186ba);
}

First and last list elements styles

css3-dropdown-first-last-items

#menu ul li:first-child > a {
        border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0;
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
        border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
        border-right-color: #0299d3;
        border-bottom-color: transparent;
}

#menu ul li:last-child > a {
        border-radius: 0 0 3px 3px;
}

The jQuery

As you already get used to, IE6 gets some extra attention:

$(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
        $('li').has('ul').mouseover(function(){
                $(this).children('ul').css('visibility','visible');
                }).mouseout(function(){
                $(this).children('ul').css('visibility','hidden');
                })
  }
});

While the :hover pseudo-class does not work for other elements than anchor, we just need to add this small jQuery snippet to fix it. It’s pretty self-explanatory.

Update: Mobile navigation support

css3-mobile-dropdown

This is something I wished to do for a while and I finally made it. I just added support for mobile devices and fixed the navigation for iPad.

You know how much I love CSS only solutions, but this time we’ll be using some jQuery to enhance this menu. To view the result, you can narrow your browser window or browse it with your smartphone.

The viewport meta tag

To maintain everything at the correct scale, the first thing added is the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Small HTML update

You need to wrap the above HTML structure using something like: <nav id="menu-wrap">. This will be our relative holder for the mobile navigation.

The jQuery add

After page loads, we’ll add the #menu-trigger element which does exactly what you think: will trigger the mobile menu when it will be clicked. Further, in the CSS, you’ll see that this element is displayed using CSS3 media queries.

Another thing here is the iPad device detection. As you can see below, we’ll remove the fancy transition effect and stick to toggling display: none/block. This way, the functionality will be maintained also on the iPad.

/* Mobile */
$('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');
$("#menu-trigger").on("click", function(){
        $("#menu").slideToggle();
});

// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#menu ul').addClass('no-transition');

The mobile CSS

Here, the CSS3 media queries do the trick. We’ll add CSS rules to override the initial styles:

#menu-trigger { /* Hide it initially */
        display: none;
}

@media screen and (max-width: 600px) {

        #menu-wrap {
                position: relative;
        }

        #menu-wrap * {
                box-sizing: border-box;
        }

        #menu-trigger {
                display: block; /* Show it now */
                height: 40px;
                line-height: 40px;
                cursor: pointer;
                padding: 0 0 0 35px;
                border: 1px solid #222;
                color: #fafafa;
                font-weight: bold;
                background-color: #111;
                /* Multiple backgrounds here, the first is base64 encoded */
                background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);
                border-radius: 6px;
                box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        }

        #menu {
                margin: 0; padding: 10px;
                position: absolute;
                top: 40px;
                width: 100%;
                z-index: 1;
                display: none;
                box-shadow: none;
        }

        #menu:after {
                content: '';
                position: absolute;
                left: 25px;
                top: -8px;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid #444;
        }       

        #menu ul {
                position: static;
                visibility: visible;
                opacity: 1;
                margin: 0;
                background: none;
                box-shadow: none;
        }

        #menu ul ul {
                margin: 0 0 0 20px !important;
                box-shadow: none;
        }

        #menu li {
                position: static;
                display: block;
                float: none;
                border: 0;
                margin: 5px;
                box-shadow: none;
        }

        #menu ul li{
                margin-left: 20px;
                box-shadow: none;
        }

        #menu a{
                display: block;
                float: none;
                padding: 0;
                color: #999;
        }

        #menu a:hover{
                color: #fafafa;
        }       

        #menu ul a{
                padding: 0;
                width: auto;
        }

        #menu ul a:hover{
                background: none;
        }

        #menu ul li:first-child a:after,
        #menu ul ul li:first-child a:after {
                border: 0;
        }               

}

@media screen and (min-width: 600px) {
        #menu {
                display: block !important;
        }
}       

/* iPad */
.no-transition {
        transition: none;
        opacity: 1;
        visibility: visible;
        display: none;
}

#menu li:hover > .no-transition {
        display: block;
}

view demo

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

Posted by: Dhiraj kumar