CSS Questions/Answeres

Describe what a “reset” CSS file does and how it’s useful?

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.  There isn’t any default color or background set for the body element, for example. In other words, this is a starting point, not a self-contained black box of no-touchiness.

Describe Floats and how they work?

Float is a CSS positioning property. Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected.

Note: Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed.

What are the various clearing techniques and which is appropriate for what context?

1- Floating the container
If you float an element containing floats, it will encompass its content. The side-effect of this is that we add another floated element to the page, while we most of the times want it to behave as a regular block element. That is solved by applying a width of 100% to the container as well, so it forces a line-break before the content after it.

Downsides

  • Setting a width to 100% might collide with desired padding.
  • IE 6 seems to add an extra bottom margin in some cases.

2- Adding Overflow: Hidden To The Container
If you add overflow: hidden to the containing element, it will automatically adjust its height and take the floated children into account.

3- Generating Content Through CSS (recommended)
Another alternative is to use the CSS pseudo-class :after to generate content after the containing element, using it to clear floats and then hiding itself. Personally, I don’t like this approach since it generates content to the page that has nothing to do there in the first place.

.container-with-generated-content:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Downsides

  • Not IE 6 nor IE 7 supports the :after pseudo-class, so you need to apply a hasLayout fix for both of them. Note that IE 7 also supports a hasLayout fix.

Explain CSS sprites, and how you would implement them on a page or site?

CSS Sprites is a method of combining multiple images used throughout your website into one big image. You can then use the proper background-position CSS attribute to load the particular image you want from your CSS Sprite using the X and Y coordinates.

More info: http://css-tricks.com/css-sprites/

What are your favourite image replacement techniques and which do you use when?

CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and text for this for the accessibility and SEO benefits, but ideally you’d like to show your logo, not text

More info: http://css-tricks.com/css-image-replacement/

CSS property hacks, conditionally included .css files, or… something else?

property hacks include both of :

1- Conditional comments to set classes on the html element

<!--[if lt IE 7 ]> <html> <![endif]-->
<!--[if IE 7 ]>    <html> <![endif]-->
<!--[if IE 8 ]>    <html> <![endif]-->
<!--[if IE 9 ]>    <html> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

 2- Browser specific CSS hacks

.someclass {
    *color: blue; /* IE 7 and below */
    _color: blue; /* IE 6 */
}

/* IE6, IE7 - star hack */
.someclass  { *color: blue; }

How do you serve your pages for feature-constrained browsers?
What techniques/processes do you use?

There are 3 ways we can follow:

  1. Do nothing except follow web standards.
  2. Create a completely separate layout
  3. Create one layout, but add code to optimize it depending on the device and browser looking at it.(That what I use) How?Use CSS Media Queries to create a specific version of my website (like mobile website/layout)

Have you ever used a grid system, and if so, what do you prefer?

Yes, Bootstrap and YUI3

How do you optimize your webpages for print?

In the case of a print stylesheet when the page is printed this functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print.

You can follow my way:
1- Create A Stylesheet For Print.
2- Avoid Unnecessary HTML Tables.
3- Know Which Portions Of The Page Don’t Have Any Print Value. (.no-print { display:none; })
4- Use Page Breaks
5- Size Your Page For Print.
6- Test!

Have you used or implemented media queries or mobile specific layouts/CSS?

Yes.

More info: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

What are some of the “gotchas” for writing efficient CSS?

  1. Use a CSS reset
  2. Clear things up
  3. Box Model
  4. IE is bad but have to deal with it with tricks
  5. Get Firebug or Chrome inspector

How would you implement a web design comp that uses non-standard fonts?

Using @font-face and Webfonts (font services like: Google Webfonts, Typekit etc.)

Explain how a browser determines what elements match a CSS selector?

Browsers match from the right; it gives an obvious starting point and lets you get rid of most of the candidate selectors very quickly