understand the css box model

8/12/2019 Understand the CSS Box Model

1/18

Understand the CSS Box Model

This is one of the first things you should be thoroughly familiar with if you want to be able to

achieve cross-browser layouts with very few hacks and workarounds . Fortunately, the boxmodel is not a difficult thing to grasp, and generally works the same in all browsers, except in

circumstances related to certain versions of Internet Explorer (more on this later).

The CSS box model is responsible for calculating:

How much space a block-level element takes up Whether or not borders and/or margins overlap, or collapse A boxs dimensions To some extent, a boxs position relative to other content on the page

The CSS box model has the following basic rules:

Block-level elements are essentially rectangular (as are all elements, really) The dimensions of a block element are calculated by width, height, padding, borders, and

margins

If no height is specified, a block element will be as high as the content it contains, pluspadding (unless there are floats, for which see below)

If no width is specified, a non-floated box will expand to fit the width of its parent minuspadding (more on this later)

Some important things to keep in mind for dealing with block-level elements:

If a box has its width set to 100%, it shouldnt have any margins , padding, or borders,otherwise it will overflow its parent

Vertically-adjacent margins can cause somecomplex collapsing issues1that may causelayout problems

Elements positioned relatively or absolutely will behave differently, the details of whichare extensive and beyond the scope of this article

The rules and principles above are stated under the assumption that the page holding theblock-level elements is rendered in standards mode (this point was added later afterreview of thecomments posted)
http://reference.sitepoint.com/css/collapsingmarginshttp://reference.sitepoint.com/css/collapsingmarginshttp://reference.sitepoint.com/css/collapsingmarginshttp://coding.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/#commentshttp://coding.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/#commentshttp://coding.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/#commentshttp://coding.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/#commentshttp://reference.sitepoint.com/css/collapsingmargins


2/18

The box model as its displayed using Fir ebug in F ir efox

Understand the Difference Between Block and Inline

For experienced developers, this is another no-brainer. It is, however, another crucial area that,

when fully understood, will causethe light bulb to appear2

, many headaches will be avoided,

and youll feel much more confident in creating cross-browser layouts.

The image below illustrates the difference between block and inline elements:
http://css-tricks.com/the-css-ah-ha-moment/http://css-tricks.com/the-css-ah-ha-moment/http://css-tricks.com/the-css-ah-ha-moment/http://css-tricks.com/the-css-ah-ha-moment/


3/18

Here are some basic rules that differentiate block elements from inline:

Block elements will, by default, naturally expand horizontally to fill their parentcontainer, so theres no need to set a width of 100%

Block elements will, by default, begin at the leftmost edge of the parent box, below anyprevious block elements (unless floats or positioned elements are utilized; see below)

Inline elements will ignore width and height settings Inline elements flow with text, and are subject to typographical properties such as white-

space, font-size, and letter-spacing

Inline elements can be aligned using the vertical-alignproperty, but block elementscannot

Inline elements will have some natural space below them in order to accommodate textelements that drop below the line (like the letter g)

An inline element will become a block element if it is floatedUnderstand Floating and Clearing


4/18

For multi-column layouts that are relatively easy to maintain, the best method is to usefloats3

.

Having a solid understanding of how floats workis, therefore, another important factor in

achieving a cross-browser experience.

A floated element can be floated either left or right, with the result that the floated element will

shift in the specified direction until it reaches the edge of its parent container, or the edge ofanother floated element. All non-floated, inline content that appears below the floated element

will flow along the side of the element that is opposite to the float direction.

Here are some important things to keep in mind when floating and clearing elements:

Floated elements are removed from the flow of other block-level, non-floated elements;so in other words, if you float a box left, a trailing paragraph (block level) thats not

floated will appear behind the float in the stack, and any text inside the paragraph (inlinelevel) will flow around the float

To get content to flow around a floated element, it must be either inline or else floated inthe same direction

A floated element without a declared width will shrink to the width of its content, so itsgenerally best to have a set width on a float

If a block element contains floated children, it will collapse,requiring a fix4
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/


5/18

An element thats cleared will avoid flowing around floated elements above them inthe document

An element thats both cleared and floated will only clear itself of elements that comebefore, not after

Use Internet Explorer First (Or Dont)

Please note that Smashing Magazines team strongly advises against developing websites in

Internet Explorer first. In our opinion, sites should be developed in modern web -

browsers, with standards first and then be tweaked for buggy versions of Internet

Explorer. The advice below does not reflect the opinion of the Smashing Editorial team.

Agree or disagree? Comment on this article!

Most of what Ive discussed so far has to do with CSS coding and layout principles. This

principle is more related to habits and preferences of most designers. Although we might hate to

use IE6 and IE7 in our everyday internet activities, when it comes time to build a client project

from scratch, one of the best things you can do is test your layout in those browsers earlyindevelopment. You might even want to open up astandalone version of IE6 or IE7and just start

your development in that browser.

Of course, you wont have access to tools like Firebug, but generally for CSS (especially early in

development) you wont need Firebug. Its much easier to get a layout working first in IE6 andIE7, then fix for other browsers, than to do it the other way around. Waiting until late in the

development process to open up IE6 and/or IE7 will likely cause some, if not all, of the

following problems:

Multiple hacks will be required, needing separate stylesheets for different versions of IE,making the code bloated and less maintainable and making the website slower

The layout in some spots may have to be reworked, multiplying development time Testing time will increase, sometimes exponentially, leaving less time for more important

tasks

The layout in other browsers will not be the same as in IE6 and IE7I wouldnt expect developers to use Internet Explorer this aggressively for personal projects, web

apps, or other non-client work. But for corporate clientswhose user base is primarily onInternet Explorer, this tip could prevent a lot of headaches while getting things to work properly,

and will definitely make a cross-browser experience much more likely.

Sometimes viewing IEs problems as annoying bugs can create unnecessary negativity, andcan hinder development time and future maintenance. Dealing with IE is a fact of life for

designers and developers, so just view its problems as you would any CSS issueand build

from there.

Understand Internet Explorers Most Common Problems
http://www.my-debugbar.com/wiki/IETester/HomePagehttp://www.my-debugbar.com/wiki/IETester/HomePagehttp://www.my-debugbar.com/wiki/IETester/HomePagehttp://www.my-debugbar.com/wiki/IETester/HomePage


6/18

If youre going to start with IE in your development, or at the very least check your layout in IE

early on, then you should understand what things Internet Explorer (usually versions 6 & 7) has

problems with, or what its limitations are.

A detailed discussion of every possible problem that can occur in Internet Explorer, and a list of

all of its CSS compatibility issues

5

is certainly beyond this article. But there are some fairlysignificant inconsistencies and issues that come up in relation to IE that all CSS developers

should be aware of. Here is a rundown of the most common problems youll need to deal with:

IE6 will become problematic if floats are overused, causing (paradoxically)disappearingcontentorduplicate text

6

IE6 will double the margin on floated elements on the side that is the same direction asthe float; setting display: inlinewill often fix this

In IE6 and IE7, if an elementdoesnt have layout7, it can cause a number of problems,including backgrounds not showing up, margins collapsing improperly,and more

8

IE6 does not support min- and max-based CSS properties like min-height, or max-width

IE6 does not support fixed positioning of background images IE6 and IE7 do not support many alternate values for the displayproperty (e.g. inline-

table, table-cell, table-row, etc.)

You cannot use the :hoverpseudo-class on any element in IE6 except an anchor () Certain versions of IE havelittle support for certain CSS selectors9(e.g. attribute

selectors, child selectors, etc.)

IE versions 6-8 have little support for CSS3, but there aresome workarounds10There are many more bugs, issues, and inconsistencies that can arise in Internet Explorer, but

these are probably the most common and most important ones to keep in mind when trying tocreate a cross-browser experience. I encourage all developers to do further research on many

of the issuesIve mentioned above in order to have a more accurate understanding of what

problems these issues can cause, and how to handle them.

Some Things Will Never Look the Same

As already mentioned, creating the exact same experience visually and functionally in everybrowser is possible, but unlikely. You can get the layout and positioning of elements close to

pixel-perfect, but there are some things that are out of the developers control.

Forms Will Often Look Different

Discussing all the differences and quirks that occur with form elements across the differentbrowsers and platforms could be an article in itself, so I wont go into extensive details here. A

simple visual demonstration, however, should suffice to get the point across.

Take a look at the image below, which displays the elements on theFacebook11

homepage, as shown in 5 different browser versions (screenshots taken fromAdobes Browserlab

12):
http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/http://haslayout.net/css/Disappearing-Content-Bughttp://haslayout.net/css/Disappearing-Content-Bughttp://haslayout.net/css/Disappearing-Content-Bughttp://haslayout.net/css/Disappearing-Content-Bughttp://www.impressivewebs.com/ie6-ghost-text-bug-with-multiple-solutions/http://www.impressivewebs.com/ie6-ghost-text-bug-with-multiple-solutions/http://www.impressivewebs.com/ie6-ghost-text-bug-with-multiple-solutions/http://reference.sitepoint.com/css/haslayouthttp://reference.sitepoint.com/css/haslayouthttp://reference.sitepoint.com/css/haslayouthttp://www.satzansatz.de/cssd/onhavinglayout.htmlhttp://www.satzansatz.de/cssd/onhavinglayout.htmlhttp://www.satzansatz.de/cssd/onhavinglayout.htmlhttp://www.impressivewebs.com/buggy-css-selectors-cross-browser-jquery/http://www.impressivewebs.com/buggy-css-selectors-cross-browser-jquery/http://www.impressivewebs.com/buggy-css-selectors-cross-browser-jquery/http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/http://www.facebook.com/http://www.facebook.com/http://www.facebook.com/https://browserlab.adobe.com/https://browserlab.adobe.com/https://browserlab.adobe.com/https://browserlab.adobe.com/http://www.facebook.com/http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/http://www.impressivewebs.com/buggy-css-selectors-cross-browser-jquery/http://www.satzansatz.de/cssd/onhavinglayout.htmlhttp://reference.sitepoint.com/css/haslayouthttp://www.impressivewebs.com/ie6-ghost-text-bug-with-multiple-solutions/http://haslayout.net/css/Disappearing-Content-Bughttp://haslayout.net/css/Disappearing-Content-Bughttp://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/


7/18

elements appear di f ferently in dif ferent browsers

Some form elements can be controlled visually. For example, if the client requires that the

submit button looks the same in every browser, thats no problem, you can just use an image,

instead of the default , which, similar to elements, will lookdifferent in different browsers.

But other form elements, like radio buttons, textarea fields, and the aforementioned elements, are impossible to style in a cross-browser fashion without complicating matters using

JavaScript plugins

13

(which some developers feel harm the user experience).

Typography Will Always Look Different

Another area in which we cant expect pixel-perfect designs is with regards to fonts, particularlyfonts on body copy.Different methods

14have sprung up to help with custom fonts in headers,

and the recently launchedGoogle Font APIwill contribute to this. But body copy will probably

always look different in different browsers.

With typography, we not only face the problem of font availability on different machines, but in

some cases even when the font is available on two different machines, the type will look

different.Windows ClearType

15

, for example, is available on IE7, but not on IE6, causing thesame font to look different on two different versions of IE.

The graphic below displays screenshots fromA List Apart16

on IE6 and IE7. The grainy text inIE6 is more evident on the heading than in the body copy, but all text displays a marked

difference between the two browsers (unless of course the text is an image):
http://widowmaker.kiev.ua/checkbox/http://widowmaker.kiev.ua/checkbox/http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/http://code.google.com/apis/webfonts/http://code.google.com/apis/webfonts/http://code.google.com/apis/webfonts/http://www.microsoft.com/typography/cleartype/tuner/step1.aspxhttp://www.microsoft.com/typography/cleartype/tuner/step1.aspxhttp://www.microsoft.com/typography/cleartype/tuner/step1.aspxhttp://www.alistapart.com/http://www.alistapart.com/http://www.alistapart.com/http://www.alistapart.com/http://www.microsoft.com/typography/cleartype/tuner/step1.aspxhttp://code.google.com/apis/webfonts/http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/http://widowmaker.kiev.ua/checkbox/


8/18

A List Aparts typography compared in IE6 and IE7

Use a CSS Reset

Ever since I started using a CSS reset for my projects, my ability to create a cross-browser

experience has greatly increased. Its true that most resets will add unnecessary code to your

CSS, but you can always go through and remove any selectors that you know will not be a factor

(for example, if you dont plan to use the tag, then you can remove reference to

it, and repeat this for any other unused tags).

Many of the margin- and padding-related differences that occur across different browsers

become more normalized (even in troublesome HTML forms) when a CSS reset is implemented.Because the reset causes all elements to start from a zero base, you gain more control over the

spacing and alignment of elements because all browsers will begin from the same basic settings.


9/18

A CSS reset as shown in Firefoxs developer toolbar

Besides the benefits of producing a cross-browser experience, a reset will also be beneficial

because you wont use as many hacks, your code will be less bloated, and youll be much more

likely to create maintainable code. I recommendEric Meyers CSS reset17

, which Ive beenusing for quite some time now.

Use SitePoints CSS Reference

If youre having trouble getting a particular CSS property to display correctly across all

browsers, look up the property in theSitePoint CSS Reference18to see if it has any compatibilitylimitations. SitePoints reference (which is also availableas a hard copy

19, though not as up to

date), includes a useful compatibility chart that displays browser support for every standard CSSproperty.

SitePoints Compatibility Charts for CSS Properties

Each compatibility chart is accompanied by a fairly detailed description of the bugs that occur in

different browsers, and users are permitted to add comments to document new bugs that come up

and to provide further explanations on complex CSS issues.
http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/http://reference.sitepoint.com/csshttp://reference.sitepoint.com/csshttp://reference.sitepoint.com/csshttp://www.sitepoint.com/books/cssref1/http://www.sitepoint.com/books/cssref1/http://www.sitepoint.com/books/cssref1/http://www.sitepoint.com/books/cssref1/http://reference.sitepoint.com/csshttp://meyerweb.com/eric/tools/css/reset/


10/18

Using this as a guide, you can narrow down the possibilities, and can usually determine whether

or not a CSS issue is due to a browser bug, or due to your own misapplication or

misunderstanding of the CSS property in question.

Conclusion

While there is so much more that could be discussed on the topic of cross-browser CSS, the

principles and guidelines Ive introduced here should provide a foundation to assist CSS

developers in creating as close to a consistent cross-browser experience as is currently possible.

Cross-browser CSS is an attainable goal, within reasonable limits.

But, as an epilogue to this article, I also would like to concur withthose promoting the use of

CSS3 with progressive enhancement20

, and encourage developers to push new CSS techniquesto the limits, even doing so, where possible, on client projects.

The principles Ive introduced here should help developers create a beautiful and intuitive

experience in IE, while providing an extra-beautiful and super-intuitive experience in the moreup-to-date browsers. Thats a cross-browser goal that is definitely worth striving for.

Data Types And Definitions

1. Null is an Object

Lets start with everyones favorite JavaScript oddity, as well knownas it is. Null is apparently

an object, which, as far as contradictions go, is right up there with the best of them. Null? An

object? Surely, the definition of null is the total absence of meaningful value, you say. Youdbe right. But thats the way itis. Heres the proof:

view source

print?1alert(typeofnull); //alerts 'object'

Despite this, null is not considered an instance ofan object. (In case you didnt know, values in

JavaScript are instances of base objects. So, every number is an instance of the Numberobject,

every object is an instance of the Objectobject, and so on.) This brings us back to sanity,because if null is the absence of value, then it obviously cant be an instance of anything. Hence,

the following evaluates to false:

view source

print?

1alert(nullinstanceofObject); //evaluates false

2. NaN is a Number
http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/http://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/


11/18

You thought null being an object was ridiculous? Try dealing with the idea of NaNnot a

numberbeing a number! Moreover, NaNis not considered equal to itself! Does your head hurt

yet?

view source

print?1alert(typeofNaN); //alerts 'Number'

2alert(NaN === NaN); //evaluates false

In fact NaNis not equal to anything. The only way to confirm that something is NaNis via the

function isNaN().

3. An Array With No Keys == False (About Truthy and Falsy)

Heres another much-loved JavaScript oddity:

view source

print?1alert(newArray() == false); //evaluates true

To understand whats happening here, you need to understand the concepts of truthy and falsy.These are sort of true/false-lite, which will anger you somewhat if you majored in logic or

philosophy.

Ive read many explanations of what truthy and falsy are, and I feel the easiest one to understand

is this: in JavaScript, every non-boolean value has a built-in boolean flagthat is called onwhen the value is asked to behave like a boolean; like, for example, when you compare it to a

boolean.

Because apples cannot be compared to pears, when JavaScript is asked to compare values of

differing data types, it first coerces them into a common data type. False, zero, null,

undefined, empty strings and NaNall end up becoming falsenot permanently, just for the

given expression. An example to the rescue:

view source

print?1varsomeVar = 0;

2alert(someVar == false); //evaluates true

Here, were attempting to compare the number 0to the boolean false. Because these data typesare incompatible, JavaScript secretly coerces our variable into its truthy or falsy equivalent,

which in the case of 0(as I said above) is falsy.
http://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSource


12/18

You may have noticed that I didnt include empty arrays in the list of falsies above. Empty arrays

are curious things: they actually evaluate to truthy but, when compared against a boolean, behave

like a falsy. Confused yet? With good cause. Another example perhaps?

view source

print?1varsomeVar = []; //empty array

2alert(someVar == false); //evaluates true

3if(someVar) alert('hello'); //alert runs, so someVar evaluates to true

To avoid coercion, you can use the value and type comparison operator, ===, (as opposed to

==, which compares only by value). So:

view source

print?1varsomeVar = 0;

2alert(someVar == false); //evaluates true zero is a falsy

3alert(someVar === false); //evaluates false zero is a number, not a

boolean

Phew. As youve probably gathered, this is a broad topic, and I recommend reading up more on

itparticularly on data coercion, which, while not uniquely a JavaScript concept, is nonethelessprominent in JavaScript.

I discuss the concept of truthy and falsy and data coercion moreover here1

. And if you really

want to sink your teeth into what happens internally when JavaScript is asked to compare twovalues, then check outsection 11.9.3 of the ECMA-262document specification.

Regular Expressions

4. replace() Can Accept a Callback Function

This is one of JavaScripts best-kept secrets and arrived in v1.3. Most usages of replace()looksomething like this:

view source

print?1alert('10 13 21 48 52'.replace(/d+/g, '*')); //replace all numbers with *

This is a simple replacement: a string, an asterisk. But what if we wanted more control over how

and when our replacements take place? What if we wanted to replace only numbers under 30?
http://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://www.mitya.co.uk/blog/2011/Apr/Twisted-logic-understanding-truthy-and-falsy-174http://www.mitya.co.uk/blog/2011/Apr/Twisted-logic-understanding-truthy-and-falsy-174http://www.mitya.co.uk/blog/2011/Apr/Twisted-logic-understanding-truthy-and-falsy-174http://www.mozilla.org/js/language/E262-3.pdfhttp://www.mozilla.org/js/language/E262-3.pdfhttp://www.mozilla.org/js/language/E262-3.pdfhttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://www.mozilla.org/js/language/E262-3.pdfhttp://www.mitya.co.uk/blog/2011/Apr/Twisted-logic-understanding-truthy-and-falsy-174http://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSource


13/18

This cant be achieved with regular expressions alone (theyre all about strings, after all, not

maths). We need tojump into a callback function to evaluate each match.

view source

print?1alert('10 13 21 48 52'.replace(/d+/g, function(match) {

2returnparseInt(match) < 30 ? '*': match;

3}));

For every match made, JavaScript calls our function, passing the match into our match argument.Then, we return either the asterisk (if the number matched is under 30) or the match itself (i.e. no

match should take place).

5. Regular Expressions: More Than Just Match and Replace

Many intermediate JavaScript developers get by just on matchand replacewith regularexpressions. But JavaScript defines more methods than these two.

Of particular interest is test(), which works like matchexcept that it doesnt return matches: itsimply confirms whether a pattern matches. In this sense, it is computationally lighter.

view source

print?1alert(/w{3,}/.test('Hello')); //alerts 'true'

The above looks for a pattern of three or more alphanumeric characters, and because the stringHellomeets that requirement, we get true. We dont get the actual match, just the result.

Also of note is the RegExpobject, by which you can create dynamic regular expressions, as

opposed to static ones. The majority of regular expressions are declared using short form (i.e.

enclosed in forward slashes, as we did above). That way, though, you cant reference variables,

so making dynamic patterns is impossible. With RegExp(), though, you can.

view source

print?

1functionfindWord(word, string) {

2varinstancesOfWord = string.match(newRegExp('\b'+word+'\b', 'ig'));

3alert(instancesOfWord);

4}

5findWord('car', 'Carl went to buy a car but had forgotten his credit

card.');


14/18

Here, were making a dynamic pattern based on the value of the argument word. The function

returns the number of times that wordappears in string as a word in its own right (i.e. not as a

part of other words). So, our example returns caronce, ignoring the cartokens in the words

Carland card. It forces this by checking for a word boundary (b) on either side of the word that

were looking for.

Because RegExpare specified as strings, not via forward-slash syntax, we can use variables in

building the pattern. This also means, however, that we must double-escape any special

characters, as we did with our word boundary character.

Functions And Scope

6. You Can Fake Scope

The scope in which something executes defines what variables are accessible. Free-standing

JavaScript (i.e. JavaScript that does not run inside a function) operates within the global scope of

the windowobject, to which everything has access; whereas local variables declared insidefunctions are accessible only within that function, not outside.

view source

print?

1varanimal = 'dog';

2functiongetAnimal(adjective) { alert(adjective+' '+this.animal); }

3getAnimal('lovely'); //alerts 'lovely dog';

Here, our variable and function are both declared in the global scope (i.e. on window). Because

this always points to the current scope, in this example it points to window. Therefore, thefunction looks for window.animal, which it finds. So far, so normal. But we can actually conour function into thinking that its running in a different scope, regardless of its own natural

scope. We do this by calling its built-in call()method, rather than the function itself:

view source

print?1varanimal = 'dog';

2functiongetAnimal(adjective) { alert(adjective+' '+this.animal); };

3varmyObj = {animal: 'camel'};

4getAnimal.call(myObj, 'lovely'); //alerts 'lovely camel'

Here, our function runs not on windowbut on myObjspecified as the first argument of the call

method. Essentially, call()pretends that our function is a method of myObj(if this doesntmake sense, you might want to read up on JavaScripts system of prototypal inheritance). Note

also that any arguments we pass to call()after the first will be passed on to our function

hence were passing in lovelyas our adjectiveargument.
http://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSource


15/18

Ive heard JavaScript developers say that theyve gone years without ever needing to use this, not

least because good code design ensures that you dont need this smoke and mirrors. Nonetheless,

its certainly an interesting one.

As an aside, apply()does the same job as call(), except that arguments to the function are

specified as an array, rather than as individual arguments. So, the above example using apply()would look like this:

view source

print?

1getAnimal.apply(myObj, ['lovely']); //func args sent as array

7. Functions Can Execute Themselves

Theres no denying it:

view source

print?1(function() { alert('hello'); })(); //alerts 'hello'

The syntax is simple enough: we declare a function and immediately call it just as we call other

functions, with ()syntax. You might wonder why we would do this. It seems like a

contradiction in terms: a function normally contains code that we want to execute later, not now,

otherwise we wouldnt have put the code in a function.

One good use of self-executing functions (SEFs) is to bind the current values of variablesforuse inside delayed code, such as callbacks to events, timeouts and intervals. Here is the problem:

view source

print?

1varsomeVar = 'hello';

2setTimeout(function() { alert(someVar); }, 1000);

3varsomeVar = 'goodbye';

Newbies in forums invariably ask why the alertin the timeoutsays goodbyeand not hello.

The answer is that the timeoutcallback function is precisely thata callbackso it doesnt

evaluate the value of someVaruntil it runs. And by then, someVarhas long since been

overwritten by goodbye.

SEFs provide a solution to this problem. Instead of specifying the timeout callback implicitly as

we do above, we return it from an SEF, into which we pass the current value of someVaras

arguments. Effectively, this means we pass in and isolate the current value of someVar,


16/18

protecting it from whatever happens to the actual variable someVarthereafter. This is like

taking a photo of a car before you respray it; the photo will not update with the resprayed color;it will forever show the color of the car at the time the photo was taken.

view source

print?1varsomeVar = 'hello';

2setTimeout((function(someVar) {

3returnfunction() { alert(someVar); }

4})(someVar), 1000);

5varsomeVar = 'goodbye';

This time, it alerts hello, as desired, because it is alerting the isolated version of someVar(i.e.the function argument, notthe outer variable).

The Browser

8. Firefox Reads and Returns Colors in RGB, Not Hex

Ive never really understood why Mozilla does this. Surely it realizes that anyone interrogating

computed colors via JavaScript is interested in hex format and not RGB. To clarify, heres an

example:

view source

print?01

04

05Hello, world!

06

07

08var ie = navigator.appVersion.indexOf('MSIE') != -1;

09var p = document.getElementById('somePara');

10alert(ie ? p.currentStyle.color : getComputedStyle(p, null).color);

11

While most browsers will alert ff9900, Firefox returns rgb(255, 153, 0), the RGB equivalent.Plenty of JavaScript functions are out there for converting RGB to hex.

Note that when I say computed color, Im referring to the current color, regardless of how it isapplied to the element. Compare this to style, which reads only style properties that were
http://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSource


17/18

implicitly set in an elements style attribute. Also, as youll havenoticed in the example above,

IE has a different method of detecting computed styles from other browsers.

As an aside, jQuerys css()method encompasses this sort of computed detection, and it returnsstyles however they were applied to an element: implicitly or through inheritance or whatever.

Therefore, you would relatively rarely need the native getComputedStyleand currentStyle.

Miscellaneous

9. 0.1 + 0.2 !== 0.3

This one is an oddity not just in JavaScript; its actually a prevailing problem in computer

science, and it affects many languages. The output of this is 0.30000000000000004.

This has to do with an issue called machine precision. When JavaScript tries to execute the line

above, it converts the values to their binary equivalents.

This is where the problem starts. 0.1 is not really 0.1 but rather its binary equivalent, which is a

near-ish (but not identical) value. In essence, as soon as you write the values, they are doomedto lose their precision. You might have just wanted two simple decimals, but what you get, as

Chris Pinenotes2

, is binary floating-point arithmetic. Sort of like wanting your text translated

into Russian but getting Belorussian. Similar, but not the same.

More is going on here, but its beyond the scope of this article (not to mention the mathematicalcapabilities of this author).

Workarounds for this problem are a favorite on computer science and developer forums. Your

choice, to a point, comes down to the sort of calculations youre doing. The pros and cons ofeach are beyond the scope of this article, but the common choice is between the following:

1. Converting to integers and calculating on those instead, then converting back to decimalsafterward; or

2. Tweaking your logic to allow for a range rather than a specific result.So, for example, rather than

view source

print?1varnum1 = 0.1, num2 = 0.2, shouldEqual = 0.3;

2alert(num1 + num2 == shouldEqual); //false

wewould do this:

view source
http://dev.opera.com/articles/view/why-i-love-ecmascript-4-real-decimals/http://dev.opera.com/articles/view/why-i-love-ecmascript-4-real-decimals/http://dev.opera.com/articles/view/why-i-love-ecmascript-4-real-decimals/http://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://dev.opera.com/articles/view/why-i-love-ecmascript-4-real-decimals/


18/18

print?

1alert(num1 + num2 > shouldEqual - 0.001 && num1 + num2 < shouldEqual +

0.001); //true

Translated, this says that because 0.1 + 0.2 is apparently not 0.3, check instead that its more or

less0.3specifically, within a range of 0.001 on either side of it. The obvious drawback is that,for very precise calculations, this will return inaccurate results.

10. Undefined Can Be Defined

OK, lets end with a silly, rather inconsequential one. Strange as it might sound, undefinedisnot actually a reserved word in JavaScript, even though it has a special meaning and is the only

way to determine whether a variable is undefined. So:

view source

print?1varsomeVar;

2alert(someVar == undefined); //evaluates true

So far, so normal. But:

view source

print?1undefined = "I'm not undefined!";

2varsomeVar;

3alert(someVar == undefined); //evaluates false!

http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

http://coding.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

http://coding.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/

http://coding.smashingmagazine.com/2010/08/04/commonly-confused-bits-of-jquery/
http://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/http://coding.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/http://coding.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/http://coding.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/http://coding.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/http://coding.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/http://coding.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/http://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#viewSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSourcehttp://coding.smashingmagazine.com/2011/05/30/10-oddities-and-secrets-about-javascript/#printSource

understand the css box model

Documents