CSS http://css.co.in Cascading Style Sheets Sat, 01 Jan 2011 08:30:07 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Using the data URI scheme to reduce an HTTP request http://css.co.in/using-the-data-uri-scheme-to-reduce-an-http-request.html http://css.co.in/using-the-data-uri-scheme-to-reduce-an-http-request.html#comments Sat, 01 Jan 2011 08:30:07 +0000 Anjanesh http://css.co.in/?p=8 Continue reading →]]> Ever wanted to include a 1px wide/high background image that repeats (one way), to your existing sprite image just to reduce that one HTTP request, even though it may not have that great an impact on speed ?

Since the image repeats itself (repeat-x or repeat-y, not both-ways), embedding it to a sprite is only useful if image’s width/height spans across the sprite image.
Using the data URI scheme, its possible to embed an image into a background-image property directly. This is supported by almost all browsers except IE7 and below. (Use this to convert an image to base64 format)

This is normally not a good solution because the base64 encoded string of the image is more (1/3 more) in bytes than the image file itself. But for small images that, say, act as a background image for a navigation container, its a good trade-off for that additional HTTP request.
And for IE6 & IE7, use the image itself.

style.css

.nav
{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAiCAYAAACeLbMRAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMHw4JJ8ytHAkAAAAhSURBVAjXY2DABYyMjP4zMTAwMFCJ+Pr1K4k6GBkZkbgApdoEsBPcDsAAAAAASUVORK5CYII%3D');
}

HTML page

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie67.css" />
<![endif]-->

ie67.css

.nav
{
    background-image:url(images/nav-bg.png);
}
]]> http://css.co.in/using-the-data-uri-scheme-to-reduce-an-http-request.html/feed 0 FireFox Specific CSS http://css.co.in/firefox-specific-css.html http://css.co.in/firefox-specific-css.html#comments Sat, 04 Dec 2010 08:24:57 +0000 Anjanesh http://css.co.in/firefox-specific-css.html Continue reading →]]> Though the chances of wanting this is pretty slim, but if you want to target a set of CSS attributes just for FireFox instead of using JavaScript to alter the styles, its possible.
Though most -moz- properties get deprecated & later removed, when the official CSS3 one is implemented, the @-moz-document is Mozilla/Gecko-only specific which is used to contain different styles rules based on filtering document URLs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>FireFox Specific CSS</title>
<style type="text/css">
h1
{
    color:red;
}
h2
{
    color:green;
}
@-moz-document url-prefix()
{
    h1
    {
        color:blue;
    }
    h2
    {
        color:black;
    }
}
</style>
</head>
<body>
<h1>Hello</h1>
<h2>World</h2>
</body>
</html>

Example : Mozilla Extensions

Related Links :

]]> http://css.co.in/firefox-specific-css.html/feed 0 Adjusting styles based on a language http://css.co.in/adjusting-styles-based-on-a-language.html http://css.co.in/adjusting-styles-based-on-a-language.html#comments Fri, 26 Nov 2010 17:00:00 +0000 Anjanesh http://css.co.in/adjusting-styles-based-on-a-language.html Continue reading →]]> Traditionally, language HTML files would be stored separately and load language specific CSS files.
But now we just store the language strings separately and programmatically print the language strings within the same HTML file.
Very often I find myself adjusting the style attributes a little here and there for different languages just so that it fits nicely inside a container or a navigation bar and looks the same across all languages.
Its actually easy to set style attributes based on the language attribute, lang in the HTML element.

<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
html[lang="en"] h2
{
    color:black;
}

html[lang="hi"] h2
{
    color:red;
}
</style>
</head>
<body>
<h2>The quick brown fox jumps over the lazy dog</h2>
</body>
</html>

This Example doesn’t change the text colour using JavaScript. JavaScript was used to change the lang attribute value in the html element.

]]> http://css.co.in/adjusting-styles-based-on-a-language.html/feed 0 CSS only Tabs using :target http://css.co.in/css-only-tabs-using-target.html http://css.co.in/css-only-tabs-using-target.html#comments Fri, 15 Oct 2010 12:30:00 +0000 Anjanesh http://css.co.in/css-only-tabs-using-target.html Continue reading →]]> Its highly unlikely that tabs using only CSS would replace JavaScript based ones.
tabs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>CSS Tabs</title>
<style type="text/css">
.css-tabs
{
    position:relative;
    text-align:center; /* This is only if you want the tab items at the center */
}
.css-tabs ul.menu
{
    list-style-type:none;
    display:inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.menu > li
{
    display:block;
    float:left;
}
.css-tabs ul.menu li > a
{
    color:#000;
    text-decoration:none;
    display:block;
    text-align:center;
    border:1px solid #808080;
    padding:5px 10px 5px 10px;
    margin-right:5px;
    border-top-left-radius:5px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:5px;
    border-top-right-radius:5px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:5px;
    -moz-user-select:none;
    cursor:pointer;
}
.css-tabs ul.menu li > div
{
    display:none;
    position:absolute;
    width:100%;
    left:0;
    margin:-1px 0 0 0;
    z-index:-1;
    text-align:left;
    padding:0;
}
.css-tabs ul.menu li > div > p
{
    border:1px solid #808080;
    padding:10px;
    margin:0;
}
.css-tabs ul.menu li > a:focus
{
    border-bottom:1px solid #fff;
}
.css-tabs ul.menu li:target > a
{
    cursor:default;
    border-bottom:1px solid #fff;
}

.css-tabs ul.menu li:target > div
{
    display:block;
}
</style>
</head>
<body>
<div id="tab2" class="css-tabs">
    <ul class="menu">
    <li id="item-1">
        <a href="#item-1">Tab 1</a>
        <div><p>Tab Content 1</p></div>
    </li>
    <li id="item-2">
        <a href="#item-2">Tab 2</a>
        <div><p>Tab Content 2</p></div>
    </li>
    <li id="item-3">
        <a href="#item-3">Tab 3</a>
        <div><p>Tab Content 3</p></div>
    </li>
    <li id="item-4" title="click for Tab 4">
        <a href="#item-4">Tab 4</a>
        <div><p>Tab Content 4</p></div>
    </li>
    </ul>
</div>
</body>
</html>

I think its safe to say that its a real annoyance when the browser re-positions the page when a fragment (named anchor) link is clicked. We don’t want the page moving up on clicking on a tab button. Example.

]]> http://css.co.in/css-only-tabs-using-target.html/feed 0 Preventing Images From Being Saved on Right-Click http://css.co.in/preventing-images-from-being-saved-on-right-click.html http://css.co.in/preventing-images-from-being-saved-on-right-click.html#comments Fri, 08 Oct 2010 12:24:35 +0000 Anjanesh http://css.co.in/preventing-images-from-being-saved-on-right-click.html Continue reading →]]> More often than not, people have asked that if they uploaded their profile picture online, would it be possible to disable downloading of their profile photo by others.

There is no full-proof method of preventing images from being saved by the end user.
The user can hit print-screen and crop the image out of the screenshot, or can directly download the image by knowing the exact image URL from the page’s source code (HTML, CSS JavaScript) or using tools like FireBug, AdBlockPlus to extract the image URL.

Whats mentioned here is a simple common technique to prevent someone from saving the actual image by right-clicking on it & Save As or Get Image Location.

  • Set the image’s src attribute to a 1 pixel transparent gif
  • Set the image’s backgound-image property to the actual image you want it to show
<img src="1x1.gif" alt="cat" style="background-image:url(cat.jpg)"/>

no save

]]> http://css.co.in/preventing-images-from-being-saved-on-right-click.html/feed 0 All Star Attributes for HTML5 elements in IE http://css.co.in/all-star-attributes-for-html5-elements-in-ie.html http://css.co.in/all-star-attributes-for-html5-elements-in-ie.html#comments Tue, 28 Sep 2010 16:20:01 +0000 Anjanesh http://css.co.in/all-star-attributes-for-html5-elements-in-ie.html Continue reading →]]> It is very common to set margin:0 and padding:0 as default to all HTML elements via the star hack.

* { margin:0; padding:0; }

And we get so used to explicitly setting margins and paddings to elements that require them, that we assume no padding & margins at all as default for all elements.

With html5shiv javascript, we can get most HTML5 functionality working in Internet Explorer (6,7,8). And with ie7-js, we can get IE (6,7,8) to behave more-or-less like IE9.
When using HTML5 elements such as header, section, footer, aside, nav, article & figure, the all star hack doesn’t work and hence we need to set them explicitly. (Looks like ie7-js is resetting the margins)

IE6 / IE7 :
Screenshot in IE6 / IE7
IE8 :
Screenshot in IE8

margin:0 isn’t applied in IE 6/7/8. So don’t forget to set it explicitly for HTML5 elements.

header, section, footer, aside, nav, article, figure { display:block; margin:0; padding:0; }
]]> http://css.co.in/all-star-attributes-for-html5-elements-in-ie.html/feed 1 Centering Lists http://css.co.in/centering-lists.html http://css.co.in/centering-lists.html#comments Fri, 28 May 2010 11:28:14 +0000 Anjanesh http://css.co.in/centering-lists.html Continue reading →]]> One of the most common techniques for creating a menu or some sort of a navigational bar is by using a list. A list is well-structured, uses fewer elements to parse than a table (buzzword tableless) and can always fall back to normal HTML when CSS or JavaScript is used to manipulate it for effects. (i.e, degrade gracefully)

This is probably the easiest way to center.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Centering Lists</title>
<style type="text/css">
* { margin:0; padding:0; }
#nav
{
    text-align:center; /* Not meant for centering a block element */
    padding:10px 0;
    background-color:lightblue;
}
#nav ul
{
    display:inline;
    padding:5px 0 5px 5px;
    background-color:green;
}
#nav ul li
{
    display:inline;
    background-color:yellow;
    margin-right:5px;
}
#nav ul li a
{
    display:inline;
    text-decoration:none;
    color:black;
    padding:0 5px;
}
#nav ul li a:hover
{
    background-color:red;
    color:white;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li class="last"><a href="#">Menu 5</a></li>
</div>
</body>
</html>

But this has some drawbacks.

  • text-align

    is meant for aligning text, not block elements, but this works for centering inline blocks on all browsers. But now, all text nodes within all child blocks inherits this text-align alignment property.

  • height

    Because the list and list items are inline, there is no room for adusting or specifying the height of the menu items. height, padding-top, padding-bottom won’t have any effect.

A workaround for inline is by treating the list as a table and the list items as table-cells. But Internet Explorer supports display:table and display:table-cell only from version 8 onwards. So this is a no no solution for IE 6 & IE 7. See the display declaration

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Centering Lists</title>
<style type="text/css">
* { margin:0; padding:0; }
#nav
{
    padding:10px 0;
    background-color:lightblue;
}
#nav ul
{
    display:table;
    margin-left:auto;
    margin-right:auto;
    background-color:green;
}
#nav ul li
{
    display:table-cell;
    padding:10px 0 10px 5px;
    background-color:green;
}
#nav ul li.last
{
    padding-right:5px;
}

#nav ul li a
{
    text-decoration:none;
    color:black;
    padding:5px;
    background-color:yellow;
}
#nav ul li a:hover
{
    background-color:red;
    color:white;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li class="last"><a href="#">Menu 5</a></li>
</ul>
</div>
</body>
</html>

A better option would be float the elements and specify exact widths. This works nicely when you know the exact content and can specify the width of each element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Centering Lists</title>
<style type="text/css">
* { margin:0; padding:0; }
#nav
{
    padding:10px 0;
    background-color:lightblue;
}
#nav ul
{
    display:block;
    padding:5px 0 5px 5px;
    width:370px; /* 30x4 (width of a) + 125 (width of Menu Item 3) + 5x5 (margin right) + 5x10x2 (padding left & right for a) */
    height:30px;
    margin-left:auto;
    margin-right:auto;
    background-color:green;
}
#nav ul li
{
    display:block;
    float:left;
    margin-right:5px;
    background-color:yellow;
}
#nav ul li a
{
    display:block;
    min-width:30px;
    width:30px;
    line-height:30px; /* Align vertically in the middle */
    text-align:center;
    text-decoration:none;
    color:black;
    padding:0 10px;
}
#nav ul li a:hover
{
    background-color:red;
    color:white;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#nav ul li.last
{
    margin-right:0;
}
</style>
<![endif]-->
</head>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#" style="width:125px;">Menu Item 3</a></li>
<li><a href="#">4</a></li>
<li class="last"><a href="#">5</a></li>
</ul>
</div>
</body>
</html>

For a fully floating list with centering, applying display:inline-block to the list is enough to achieve the desired result. But according to Quirksmode, inline-block is incomplete in IE6 and IE7. I don’t know how incomplete works, but it wierdly seems to work in IE6 when added in IE conditional statements.

<style type="text/css">
#nav-container ul
{
    display:inline-block;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#nav-container ul
{
    display:inline; /* For some reason now this works as inline-block in IE6 ?!? */
}
</style>
<![endif]-->

Full HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Centering Lists</title>
<style type="text/css">
* { margin:0; padding:0; }
#nav
{
    text-align:center;
    padding:10px 0;
    background-color:lightblue;
}
#nav ul
{
    display:inline-block;
    padding:5px 0 5px 5px;
    background-color:green;
}
#nav ul li
{
    display:block;
    float:left;
    background-color:yellow;
    margin-right:5px;
}
#nav ul li a
{
    display:block;
    min-width:30px; /* Wont work in IE6 */
    line-height:30px; /* Align vertically in the middle */
    text-decoration:none;
    text-align:center;
    color:black;
    padding:0 10px;
}
#nav ul li a:hover
{
    background-color:red;
    color:white;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#nav ul
{
    display:inline; /* For some reason now this works as inline-block in IE6 ?!? */
}
#nav ul li.last
{
    margin-right:3px;
}
</style>
<![endif]-->
</head>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">4</a></li>
<li class="last"><a href="#">5</a></li>
</ul>
</div>
</body>
</html>

And using HTML5′s nav element :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Centering Lists</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style type="text/css">
* { margin:0; padding:0; }
header, section, footer, aside, nav, article, figure { display:block; }
#nav
{
    margin-top:0; /* ie7-js's IE9.js seems to add a margin-top */
    text-align:center;
    padding:10px 0;
    background-color:lightblue;
}
#nav ul
{
    display:inline-block;
    padding:5px 0 5px 5px;
    background-color:green;
}
#nav ul li
{
    display:block;
    float:left;
    margin-right:5px;
    background-color:yellow;
}
#nav ul li a
{
    float:left; /* Required for IE6 */
    display:block;
    min-width:30px;
    line-height:30px; /* Align vertically in the middle */
    text-decoration:none;
    text-align:center;
    color:black;
    padding:0 10px;
}
#nav ul li a:hover
{
    background-color:red;
    color:white;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#nav ul
{
    display:inline; /* For some reason this works in IE6 ?!? */
}
#nav ul li.last
{
    margin-right:3px;
}
</style>
<![endif]-->
</head>
<body>
<nav id="nav">
<ul>
<li class="first"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">4</a></li>
<li class="last"><a href="#">5</a></li>
</ul>
</nav>
</body>
</html>
]]> http://css.co.in/centering-lists.html/feed 0