Front-End Developer Interview: CSS

Questions source: Github (Darcy Clarke)

 

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

It’s a short, often compressed (minified) set of CSS rules thatresets the styling of all HTML elements to a consistent baseline.

Every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything.

Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.

Source: http://www.cssreset.com/what-is-a-css-reset/

 

Describe Floats and how they work.

When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are “float: left”, “float: right” or “float: none”. A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content can flow down the right side of a left-floated box and down the left side of a right-floated box. You can also put several floats beside each other. If there isn’t enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it. You should always set a width on floated items. If no width is set, the results can be unpredictable.

Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the “clear” property to these following elements. The four options are “clear: left”, “clear: right”, “clear: both” or “clear: none”.

Source: http://css.maxdesign.com.au/floatutorial/introduction.htm

 

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

  • before and after pseudo classes
  • overflow property of the container
  • with another element with clear property

Samples: http://themergency.com/clearfix/clearfix_demo_1_none.htm

Source: http://code-tricks.com/css-clearfix-methods/

 

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

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

Every single image, whether it’s an <img> tag or an background-image from your CSS is a separate HTTP-Request. Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.

Examples:

  • before (without sprites) and after (with sprites) – CSS Tricks
  • W3C

Source:

 

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

By and by a new image replacement techniques comes out, so I try to find and use the freshest one.

#replace
{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

Some examples (CSS Tricks): http://css-tricks.com/examples/ImageReplacement/

Source: http://www.sitepoint.com/new-css-image-replacement-technique/

 

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

Conditional CSS classes ( used by e.g. HTML5 Boilerplate)

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

What are the different ways to visually hide content (and make it available only for screen readers)?

  • text Indent
    .element-invisible 
    { 
        text-indent: -9999em; outline: 0; 
    }
  • position Absolute and Collapsed
    .element-invisible 
    { 
        height: 0; 
        overflow: hidden; 
        position: absolute; 
    }
  • position Absolute and Offscreen
    .element-invisible 
    { 
        position: absolute; 
        top: -999999em; 
        left: auto; 
        width: 1px; 
        height: 1px; 
        overflow:hidden; 
    }
  • clip Method
    .element-invisible 
    { 
        position: absolute !important; 
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
        clip: rect(1px, 1px, 1px, 1px); 
    }
  • a few techniques into one
    .element-invisible 
    { 
        position: absolute !important; 
        height: 1px; 
        width: 1px; 
        overflow: hidden; 
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
        clip: rect(1px, 1px, 1px, 1px); 
    }

Remarks:

  • visibility: hidden; and/or display:none;
    These styles will hide text from all users. The text is removed from the visual flow of the page and is ignored by screen readers.
  • width:0px; height:0px
    Because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result.

Source:

 

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

 

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

Yes 🙂

 

Any familiarity with styling SVG?

Not yet. Not supported by IE8. http://caniuse.com/#feat=svg-img

 

How do you optimize your webpages for print?

By adding external stylesheet and apply some rules.

<link rel="stylesheet"  href="print.css" media="print">

What to remove:

  • navigation (not needed on paper)
  • background images (can make text hard to read)

Rules to apply:

  • dark text on a white background
  • important images: logo, products etc…
  • hierarchical headers
  • page URL
  • make some tests – preview before print

 

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

Source: http://speckyboy.com/2011/03/08/website-speed-part-1-write-more-efficient-css/

 

What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS) If so, describe what you like and dislike about the CSS preprocessors you have used.

Try to compare articles attached to this question. It depends what to treat as advantage or disadvantage.

Advantages:

  • global changes (e.g. colours) in one place

Disadvanteges:

  • relying on a preprocessor for any update or change (ensure consistency with preprocessor and generated CSS)

To consider:

  • nested structure
  • extensions and mixins
  • generated CSS size

Source:

 

How would you implement a web design comp that uses non-standard fonts? Webfonts (font services like: Google Webfonts, Typekit etc.)

  • using @font-face
  • using font service link
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

 

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

Source:

 

Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

All HTML elements can be considered as boxes. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.

IE8 and earlier versions of IE, included padding and border in the width property. To fix this problem, add a <!DOCTYPE html> to the HTML page.

 

box-sizing property:

  • content-box – (default) element width doesn’t include padding and border
  • border-box –  element width includes padding and borders

Demo: http://codepen.io/elad2412/pen/Abhdy

Source:

 

List as many values for the display property that you can remember.

  • none
  • inherit
  • inline
  • inline-block
  • block
  • table
  • table-cell

 

What’s the difference between inline and inline-block?

Inline:

  • respects left and right margins and padding
  • doesn’t respect top and bottom  margins and padding
  • doesn’t have a width and height
  • allow other elements to sit to its left and right

Block:

  • respects all margins and paddings
  • respects width and height
  • line break after

Inline-block:

  • placed like an inline element (on the same line) but behaves as block
  • respects all margins and paddings
  • respects width and height
  • allow other elements to sit to its left and right

Visual answer: Stack Overflow

 

What’s the difference between a relative, fixed, absolute and statically positioned element?

Absolute

  • displayed on the page in relation to the document, or a parent element with a positioning different from static
  • using topleftbottom and right CSS properties, exact position can be specified

Fixed

  • position in relation to the browser window
  • allows to display toolbars, buttons or navigation menus, which are anchored at a fixed position and scroll with the page

Relative

  • moves an element from its normal position with the topleftbottom and right CSS properties

Static

  • means that every element is positioned in the natural order it is added to the page

Demo: http://demo.tutorialzine.com/2010/06/microtut-how-css-position-works/demo.html

Source: http://tutorialzine.com/2010/06/microtut-how-css-position-works/

photo credit: Samuel Mann via photopin cc

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>