Frontend Developer Interview Questions and Answers (2)
What is the difference between classes and IDs in CSS?
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
http://css-tricks.com/the-difference-between-id-and-class/
Describe what a "reset" CSS file does and how it's useful.
Bonus for pointing out the downsides of a "reset", and/or mentioning "normalize" as a better alternative.
What Is A CSS Reset?
A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. In a word,reset.css is used to normalize browser's default styles.
Why USE A CSS Reset?
Browser have different "built-in" styles which they apply to different html-elements. These styledefinitions may vary accross different browsers.
Which CSS Reset Should I Use?
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
If you’re working with HTML5, use the HTML5 Doctor Reset CSS
If you’re doing some quick prototyping and testing, or building a non-HTML5 page, useEric Meyer’s Reset CSS.
If you want a CSS Reset that acts more as a framework, un-resetting styles after the CSS Reset, use the Tripoli CSS Reset or the Vanilla CSS Un-Reset
If you want a full-featured CSS Framework, try using and abusing all the modules of theYUI 3 CSS Library
Generally speaking, don’t use the Universal Selector ‘*’ CSS Reset
Describe Floats and how they work.
A float element in page like a boat in water.
Describe z-index and how stacking context is formed.
What are the various clearing techniques and which is appropriate for what context?
The Empty Div Method is, quite literally, an empty div. . Sometimes you'll see a
element or some other random element used, but div is the most common because it has no brower default styling, doesn't have any special function, and is unlikely to be generically styled with CSS. This method is scorned by semantic purists since its presence has no contexual meaning at all to the page and is there purely for presentation. Of course in the strictest sense they are right, but it gets the job done right and doesn't hurt anybody.
The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However if you find yourself adding a new div just to apply this, it is equally as unsemantic as the empty div method and less adaptable. Also bear in mind that the overflow property isn't specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.
The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Then apply this CSS:
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Explain CSS sprites, and how you would implement them on a page or site.
CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.(Css sprites is a technology to combin many image into one, and use css background-position to find which part you want)
CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
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.
http://css-tricks.com/css-image-replacement/
CSS property hacks, conditionally included .css files, or... something else?
How do you serve your pages for feature-constrained browsers?
What techniques/processes do you use?
Progressive Enhancement
Graceful Degradation
What are the different ways to visually hide content (and make it available only for screen readers)?
css media types
http://www.w3.org/TR/CSS2/media.html
Have you ever used a grid system, and if so, what do you prefer?
Of course yes.
gridpak. A simple grid system.
Bootstrap Grid System
Grid960
YUI CSS Grid
I prefer Bootstrap grid.
Have you used or implemented media queries or mobile specific layouts/CSS?
Of course yes.
I implemented media queries on www.1duan.com.the site works fine on all media included handle devices.
Any familiarity with styling SVG?
http://www.w3.org/TR/SVG/styling.html
How do you optimize your webpages for print?
Create A Stylesheet For Print
Avoid Unnecessary HTML Tables
Hiding Needless Element For Print
Size Page For Print
Use Page Break
What are some of the "gotchas" for writing efficient CSS?
Use efficient CSS selectors
ID selectors qualified by class and/or tag selectors
Class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway).
Avoid a universal key selector.
Allow elements to inherit from ancestors, or use a class to apply a style to multiple elements.
Make your rules as specific as possible.
Prefer class and ID selectors over tag selectors.
Remove redundant qualifiers.
These qualifiers are redundant:
Avoid using descendant selectors, especially those that specify redundant ancestors.
For example, the rule body ul li a {...} specifies a redundant body selector, since all elements are descendants of the body tag.
Use class selectors instead of descendant selectors.
Avoid CSS expressions
Put CSS in the document head
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.
How would you implement a web design comp that uses non-standard fonts?
Webfonts (font services like: Google Webfonts, Typekit etc.)
Explain how a browser determines what elements match a CSS selector?
As the browser parses HTML, it constructs an internal document tree representing all the elements to be displayed. It then matches elements to styles specified in various stylesheets, according to the standard CSS cascade, inheritance, and ordering rules. In Mozilla's implementation (and probably others as well), for each element, the CSS engine searches through style rules to find a match. The engine evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule. (The "selector" is the document element to which the rule should apply.)
Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
What does * { box-sizing: border-box; } do? What are its advantages?
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
Important: 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 to the HTML page.
The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
List as many values for the display property that you can remember.
What's the difference between inline and inline-block?
Elements with display:inline-block elements are like display:inline elements, but they can have a width and height. So you can use an inline-block element as a block while flowing it within text.
What's the difference between a relative, fixed, absolute and statically positioned element?
There are 4 different types of CSS positioning, which are as the title of this post states: Static, Relative, Absolute, and Fixed. Each one has its uses and special circumstances for when to use them.
What existing CSS frameworks have you used locally, or in production? (Bootstrap, PureCSS, Foundation etc.)
If so, which ones? If you could, how would you change/improve them?
Have you played around with the new CSS Flexbox or Grid specs?
http://www.tuicool.com/articles/yEV7ve
http://css-tricks.com/old-flexbox-and-new-flexbox/
How is responsive design different from adaptive design?
Have you ever worked with retina graphics? If so, when and what techniques did you use?
http://designmodo.com/responsive-retina-images/
