7t7en scraps

IE6 min-width and max-width

77scraps — Sat, 02 Aug 2008 15:21:03 +0000

IE6 doesn’t understand few important CSS properties:

min-width, max-width

Here is a workaround to achieve this using CSS Expressions*.

#wrapper {
   width: expression(
      (document.documentElement.clientWidth > 962)? “960px” :
         (document.documentElement.clientWidth < 762)? “760px” :
            “auto”);
}

Only max-width can be applied as given below:

width:expression(document.body.clientWidth > 800? “800px”: “auto” );

Note: This won’t work for tag, IE alone recognizes the CSS expressions. Other browsers will ignore this line of code.

*: CSS expressions were introduced in Internet Explorer 5.0 and it allows you to to assign a JavaScript expression to a CSS property.

For more details:

http://www.svendtofte.com/code/max_width_in_ie/

5 steps: CSS code readability

77scraps — Sun, 27 Jul 2008 08:54:04 +0000

1. Divide and conquer your code : use master stylesheet

/*- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

[Master Stylesheet]

Project: Smashing Magazine

Version: 1.1

Last change: 05/02/08 [fixed Float bug, vf]

Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl)

Primary use: Magazine

- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - */

@import “reset.css”;

@import “layout.css”;

@import “colors.css”;

@import “typography.css”;

@import “flash.css”;

/* @import “debugging.css”; */

2. Define a table of contents

/*- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

[Table of contents]

1. Body

2. Header / #header

2.1. Navigation / #navbar

3. Content / #content

3.1. Left column / #leftcolumn

3.2. Right column / #rightcolumn

3.3. Sidebar / #sidebar

3.3.1. RSS / #rss

3.3.2. Search / #search

3.3.3. Boxes / .box

3.3.4. Sideblog / #sideblog

3.3.5. Advertisements / .ads

4. Footer / #footer

- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – */

3. Define your colors and typography

/*- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

# [Color codes]

# Dark grey (text): #333333

# Dark Blue (headings, links) #000066

# Mid Blue (header) #333399

# Light blue (top navigation) #CCCCFF

# Mid grey: #666666

- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – */

/*- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

[Color codes]

Background: #ffffff (white)

Content: #1e1e1e (light black)

Header h1: #9caa3b (green)

Header h2: #ee4117 (red)

Footer: #b5cede (dark black)

a (standard): #0040b6 (dark blue)

a (visited): #5999de (light blue)

a (active): #cc0000 (pink)

- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - */

TYPOGRAPHY

/*- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

[Typography]

Body copy: 1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;

Headers: 2.7em/1.3em Helvetica, Arial, “Lucida Sans Unicode”, Verdana, sans-serif;

Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;

Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;

Notes: decreasing heading by 0.4em with every subsequent heading level

- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - – - */

4. Order CSS properties: alphabetically

body {
background: #fdfdfd;
color: #333;
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0;
}

5. Indentation and comments

#sidebar ul li a {
     display: block;
     background-color: #ccc;
          border-bottom: 1px solid #999; /* @new */
     margin: 3px 0 3px 0;
          padding: 3px; /* @new */
}

Courtesy: Smashing Magazine

For the full article (refer):

http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/

CSS Shorthands

77scraps — Fri, 25 Jul 2008 20:28:15 +0000

Colors

One great shortcut that many don’t know about is that when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

#000000 becomes #000.

#336699 becomes #369.

Box dimensions

The properties that affect box dimensions share the same syntax: the shorthand property followed by one to four space separated values:

property:value1;
property:value1 value2;
property:value1 value2 value3;
property:value1 value2 value3 value4;

Which sides of the box the values affect depends on how many values you specify. Here’s how it works:

One value: all sides
Two values: top and bottom, right and left
Three values: top, right and left, bottom
Four values: top, right, bottom, left

«: Thinking of the face of a clock is an easy way of remembering which side each value affects. Start at 12 o’clock (top), then 3 (right), 6 (bottom), and 9 (left). You can also think of the TRouBLe you’ll be in if you don’t remember the correct order

Margin and padding

1. margin-top:1em;
2. margin-right:0;
3. margin-bottom:2em;
4. margin-left:0.5em;

margin:1em 0 2em 0.5em; /* top — right — bottom — left */
padding:1em 0 2em 0.5em;

Borders

There are four shorthands available:

border

border-width ]

border-style ] all the three in TRouBLe order.

border-color ]

border: width style color;/* [border:1px solid #000;] itneed not be in the same order, however use this order (W3C)as some older browsers of SAFARImay not recognize*/

border-width: 1px 2px 3px 4px;

border-style: solid dotted dashed double;

border-color: #000 #fff #ccc #222;

Backgrounds

Instead of using background-color, background-image, background-repeat, background-attachment, and background-position to specify an element’s background, you can use just background:

background:color image repeat attachment position; /* it need not be in the same order, however use this order (W3C) as some older browsers of SAFARI may not recognize */
background:#f00 url(background.gif) no-repeat fixed 0 0;

«:Remember that when you give two values for position, they have to appear together. When using length or percentage values, put the horizontal value first.

Fonts
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:”Lucida Grande”,sans-serif;

font: font-style font-variant font-weight font-size line-height font-family;/* it need not be in the same order, however use this order (W3C) as some browsers may not recognize */
font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

«: When using the font shorthand you can omit any values except font-size and font-family – you always need to give values for those, and in that order.

Lists

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

list-style:square inside url(image.gif);

Outlines
The outline property is very rarely used, mainly because of its current poor browser support – as far as I know only Safari, OmniWeb and Opera currently support it. Anyway, using the individual properties you can define an outline like this:

outline-color:#f00;
outline-style:solid;
outline-width:2px;

outline:#f00 solid 2px;

«: Outlines have some interesting characteristics that make them useful: unlike borders, they do not take up any space and are always drawn on top of a box. This means that hiding or showing outlines doesn’t cause reflow, and they don’t influence the position or size of the element they are applied to or that of any other boxes. Outlines may also be non-rectangular.

Attribute Selector Patterns

77scraps — Fri, 25 Jul 2008 20:17:38 +0000

Untitled Document

Attribute Selector Patterns
E[attr] Attribute selector, matches any element E that has attribute attr, regardless of its value.

E[attr="value"] Attribute selector, matches any element E that has attribute attr set to the specified value.

E[attr~="value"] Attribute selector, some element attributes may have multiple values, separated by spaces. This pattern matches any element with attribute attr containing the specified value in its list.

E.value Class selector, for HTML pages only. Matches any element that has the specified value in its CLASS attribute. Equivalent to E[class~="value"].

E#value ID selector, matches the element with the given ID. For HTML this is equivalent to E[id="value"].

–>

Heloo World

2012

2010

Courtesy: http://www.brainjar.com

CSS points to remember…

77scraps — Fri, 25 Jul 2008 19:47:36 +0000

Margins can even have negative values, but you can’t use negative values for padding.
Inherit: The keyword “inherit” can be used on every CSS property. Setting a CSS property to “inherit” causes its value to be taken from the element’s parent (“inherit” is not supported by Internet Explorer).
Specify a unit unless the value is 0
- Not specifying a unit for length values is a very common mistake among CSS beginners.
  - In HTML you can get away with that, but in CSS all length values must have a unit. There are two exceptions: line-height and 0 (zero) values.
  - example 1: line-height:12;
  - example 2: margin:12px 0 11px 0;
- The value must be immediately followed by the unit – do not insert a space between them.
Remember case sensitivity
- When CSS is used with XHTML, element names in selectors are case sensitive. Always use lowercase for element names in CSS selectors.
Web safe colours
- Specify web safe colours by using only digits that are multiples of 3 for the red, green, and blue values: 0, 3, 6, 9, C, and F. #99c is a web safe colour, #98c is not
Eliminate element types for class and id selectors
- When writing selectors that target an element with a certain class or id value, you can omit the element type before the . (class selector) or # (id selector).
  
  So, instead of writing
  
  div#content { /* declarations */ }
  fieldset.details { /* declarations */ }
  
  you can write
  
  #content { /* declarations */ }
  .details { /* declarations */ }
  
  and save a few bytes for each selector.
  
  This is especially useful for id selectors since they must be unique in a document, which reduces the risk of rules conflicting with each other. class names on the other hand can be used any number of times in a document, and different element types can be assigned the same class name (or names).
- If you write one rule with and one rule without the element type in the selector, the rule that uses the element type will have higher specificity.
Don’t redeclare inherited values
- The values of many properties are inherited by any descendants of the element that you specify the property for.

body { font-weight:normal; }

Be aware that some properties may be overridden by browser specific user agent style sheets, i.e. the browser’s defaults. That’s why you can’t make all headings non bold with the above rule:

Specify link styles in the right order
- :link :visited :hover :active.
How big is that box?
- When something goes wrong, start by validating your CSS. Anybody can make a typo.
- If there are no errors in the CSS you need to start analysing what’s going on. I like applying background colours to the elements I’m having trouble with to clearly see the space they occupy. Some people suggest using borders, which is fine in many cases. The problem with that approach is that borders will increase an element’s dimensions, and top and bottom borders will prevent vertical margins from collapsing. Background colours are generally safer.
Faster loading of large TABLES?
- The CSS table-layout property allows you to fix the table layout so that the table renders much faster.
  
  table { table-layout:fixed }
  
  table-layout:fixed;width:600px;”>
  Without the table-layout property, on large tables, users won’t see any part of the table until the browser has rendered the whole table. This can give the impression that your page loads very slowly. On the other hand, if you use the table-layout property, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker.
  
  Box Types – block n inline
  
  77scraps — Fri, 25 Jul 2008 19:41:27 +0000
  
  There are two basic types of boxes, block and inline.
  
  Block boxes are generated by elements such as P, DIV or TABLE.
  
  Inline boxes are generated by tags such as B, I or SPAN and actual content like text and images.
  
  Setting a value of block on an inline element, for example, will cause it to be treated as a block element.
  
  There are other types of boxes which apply to special elements like lists and tables. However, these are ultimately treated as block or inline boxes for positioning purposes.
  
  CSS Reset by Eric Meyer
  
  77scraps — Fri, 25 Jul 2008 19:36:33 +0000
  
  /* Don’t forget to set a foreground and background color on the ‘html’ or ‘body’ element! */
  
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  line-height: 1;
  font-family: inherit;
  text-align: left;
  vertical-align: baseline;
  }
  
  a img, :link img, :visited img {
  border: 0;
  }
  
  table {
  border-collapse: collapse;
  border-spacing: 0;
  }
  
  ol, ul {
  list-style: none;
  }
  
  q:before, q:after,
  blockquote:before, blockquote:after {
  content: “”;
  }
  
  CSS Reset by Kyle
  
  77scraps — Thu, 24 Jul 2008 19:40:46 +0000
  
  /***** Global Settings *****/
  
  html, body {
  border:0;
  margin:0;
  padding:0;
  }
  
  body {
  font:100%/1.25 Arial, Helvetica, sans-serif;
  }
  
  /***** Headings *****/
  
  h1, h2, h3, h4, h5, h6 {
  margin:0;
  padding:0;
  font-weight:normal;
  }
  
  h1 {
  padding:30px 0 25px 0;
  letter-spacing:-1px;
  font-size:2em;
  }
  
  h2 {
  padding:20px 0;
  letter-spacing:-1px;
  font-size:1.5em;
  }
  
  h3 {
  font-size:1em;
  font-weight:bold;
  }
  
  /***** Common Formatting *****/
  p, ul, ol {
  margin:0;
  padding:0 0 1.25em 0;
  }
  
  ul, ol {
  padding:0 0 1.25em 2.5em;
  }
  
  blockquote {
  margin:1.25em;
  padding:1.25em 1.25em 0 1.25em;
  }
  
  small {
  font-size:0.85em;
  }
  
  img {
  border:0;
  }
  
  sup {
  position:relative;
  bottom:0.3em;
  vertical-align:baseline;
  }
  
  sub {
  position:relative;
  bottom:-0.2em;
  vertical-align:baseline;
  }
  
  acronym, abbr {
  cursor:help;
  letter-spacing:1px;
  border-bottom:1px dashed;
  }
  
  /***** Links *****/
  
  a, a:link, a:visited, a:hover {
  text-decoration:underline;
  }
  
  /***** Forms *****/
  
  form {
  margin:0;
  padding:0;
  display:inline;
  }
  
  input, select, textarea {
  font:1em Arial, Helvetica, sans-serif;
  }
  
  textarea {
  width:100%;
  line-height:1.25;
  }
  
  label {
  cursor:pointer;
  }
  
  /***** Tables *****/
  
  table {
  border:0;
  margin:0 0 1.25em 0;
  padding:0;
  }
  
  table tr td {
  padding:2px;
  }
  
  /***** Wrapper *****/
  
  #wrap {
  width:960px;
  margin:0 auto;
  }
  
  /***** Global Classes *****/
  
  .clear         { clear:both; }
  .float-left    { float:left; }
  .float-right   { float:right; }
  .text-left     { text-align:left; }
  .text-right    { text-align:right; }
  .text-center   { text-align:center; }
  .text-justify { text-align:justify; }
  .bold          { font-weight:bold; }
  .italic        { font-style:italic; }
  .underline     { border-bottom:1px solid; }
  .highlight     { background:#ffc; }
  .wrap          { width:960px;margin:0 auto; }
  .img-left      { float:left;margin:4px 10px 4px 0; }
  .img-right     { float:right;margin:4px 0 4px 10px; }
  .nopadding     { padding:0; }
  .noindent      { margin-left:0;padding-left:0; }
  .nobullet      { list-style:none;list-style-image:none; }
  
  Resetting FONT size for all browsers
  
  77scraps — Wed, 23 Jul 2008 17:29:15 +0000
  
  EM calculations
  
  Sizing text is always an important part of making a usable design.
  I start all my CSS files with the following rules:
  
  html { font-size:100.01%; }
  body { font-size:1em; }
  
  The explanation for this comes from “CSS: Getting Into Good Coding Habits:”
  
  This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.

7t7en scraps

IE6 min-width and max-width

5 steps: CSS code readability

CSS Shorthands

Attribute Selector Patterns

CSS points to remember…

Box Types – block n inline

CSS Reset by Eric Meyer

CSS Reset by Kyle

Resetting FONT size for all browsers