CSS Questions

1. What is the difference between classes and IDs in CSS?

Class name can be used multiple times, ID should be unique, but not a must. Querying by ID (#div1) of a DIV has a higher priority than by its Class Name(.div1).  Selecting a document with multiple same IDs will result the first DIV.

2. What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?

Normalizing CSS

Resetting CSS

Normalizing means to make a consistent look and feel of document styles for various browsers, while resetting is to clear the default CSS style of DOM elements.

3. Describe Floats and how they work.

Floats

All about Floats

Floats 101

Float defines whether or not an element should float (left/right). In the simplest usage, the float can be used to wrap text around a image.

Float affects not only  the target element, but also its children.

4. Describe z-index and how stacking context is formed.

The z-index property specifies the stack order of an element, an element with greater stack order is always in front of an element with a lower stack order. Say two DIVs with the same parent, higher z-index will be displayed. It will inherit the z-index property of the parent. Z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Value can be negative.

5. Describe BFC(Block Formatting Context) and how it works.

BFC

Understanding BFC

A BFC is part of the visual CSS rendering of a web page in which block boxes are laid out. For effectively creating the block content, applying CSS like overflow: scroll/hidden, display: inline-block/flex/table, float:left/right to the container.

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).

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

a. Create an empty DIV:

b. Set overflow: setting auto or hidden overflow property on parent will expand it to contain the floats.

c. Use psuedo class: uses the parent’s :after to add the clear: both property
.clearfix:after {
content: “”;
visibility: hidden;
display: block;
height: 0;
clear: both;
}

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

CSS sprites is the technique to combine all individual images into one big image so that it can help reduce HTTP requests and data size.

Usually, you don’t know how many images you need at the beginning, so it will be done at the stage of production launch. Locating of individual images is by using background image position index.

8. 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.

Image Replacement

History of Image replacement methods

9. How would you approach fixing browser-specific styling issues?

IE conditional CSS fix

The principles of cross-browsers CSS

a. Use normalized CSS library

b. Implement vendor specific CSS fix

c. Test in all targeted browsers

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

a. Reduce content and layout for feature-constrained browsers.

b. Add vendor-specific CSS fixes to the pages

c. Media query, browser detection (buggy)

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

When and how to visually hide content?

Invisible Content

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

Yes. Bootstrap, MUI CSS

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

Yes. Using Media Queries

14. Are you familiar with styling SVG?

Not much experience in SVG except generating SVG images from JPG/PNG.

15. How do you optimize your webpages for print?

The simplest method is to create a style sheet for print only and test it well.

e.g <link rel=”stylesheet” type=”text/css” href=”/print.css” href=”/print.css” media=”print” />

Some steps:

Format heading and paragraph tags, links and tables, clear unnecessary contents and images.

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

a. Know different browsers have different CSS hacks

b. Cater for mobile devices or small screen size

c. Good HTML structure and CSS OOP rules with good naming

d. Avoid key selectors that match large numbers of elements (tag and universal selectors)

e. Prefer class and ID selectors over tag selectors

f. Avoid redundant selectors

g. Preferably don’t use * (universal selector)

h. Use framework (Bootstrap etc.)

17. What are the advantages/disadvantages of using CSS preprocessors? Describe what you like and dislike about the CSS preprocessors you have used.

Explained here.

Another one.

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

A study on Quora.

Use @font-face or link the webfont url as CSS.

19. Describe pseudo-elements and discuss what they are used for.

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-linepseudo-element targets only  the first line of an element specified by the selector.

20. Describe pseudo-classes

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

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

Browsers read selectors from right-to-left. First looks for all elements matching the key selector (the right-most). Then checks if it matches or is under the next (left-most) element.

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

The box model.

For display purpose, every element in the page is considered a box. The box model refers to the specification of the box attributes such as the width, padding, border and margin. Some browsers (such as Firefox) think the width should only include the the content itself, not the padding, boarder, nor margin. Other browsers (such as IE) think the width should include the content, padding, and boarder, but not the margin.

Content-box: width & height includes content but not padding/border/margin

Padding-box: include up to padding

Border-box: include up to border, but not margin

23. What does * { box-sizing: border-box; } do? What are its advantages?

box-sizing

content-box:This is the initial and default value as specified by the CSS standard. The width and heightproperties are measured including only the content, but not the padding, border or margin. Note: Padding, border & margin will be outside of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 370px;}So simply the dimension of element is calculated as, width = width of the content, and height = height of the content (excluding the values of border and padding).

border-box:The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g.  .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can’t be negative and is floored to 0, making it impossible to use border-box to make the element disappear.Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.

The advantage of forcing all elements to adopt the border-box model is to unify the element width calculation regardless to browsers.

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

block, inline, inline-block, none, inherit, table, table-cell, flex.

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

inline-block: Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

block:Displays an element as a block element

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

How they differ?

relative: relative to itself, combine to use top/left..

fixed: fixed at the position to the viewport, like top nav, no change when window scrolls.

absolute: An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. You use it to position element to the exact location. It’s relative to the parent.

static: default position

27. The ‘C’ in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?

Specs

CSS Specificity and Inheritance

Order in ascending order of importance:

  1. User agent declarations,
  2. User declarations,
  3. Author declarations,
  4. Author !important declarations,
  5. User !important declarations.

Specificity: Every CSS rule has a particular weight (as mentioned in the introduction), meaning it could be more or less important than the others or equally important. This weight defines which properties will be applied to an element when there are conflicting rules.

The following list of selector types is by increasing specificity:

  1. Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
  2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
  3. ID selectors (e.g., #example)
  4. Universal selector (*), combinators (+, >, ~, ‘ ‘) and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)

28. What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

Bootstrap. MUI. Can split out component by component by a tiny piece of CSS ?

29. Have you played around with the new CSS Flexbox or Grid specs?

No.

Flexbox

The defining aspect of the flex layout is the ability to alter its items’ width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow. For small-scale layout. A guide to flexbox.

Grid specs

For large-scale responsible layout. A guide to Grid CSS.

30. How is responsive design different from adaptive design?

Difference

Make a Choice

Responsive is fluid and adapts to the size of the screen no matter what the target device. Responsive uses CSS media queries to change styles based on the target device such as display type, width, height etc., and only one of these is necessary for the site to adapt to different screens.

Adaptive design, on the other hand, uses static layouts based on breakpoints which don’t respond once they’re initially loaded. Adaptive works to detect the screen size and load the appropriate layout for it – generally you would design an adaptive site for six common screen widths (320,480,760,960,1200,1600)

31. Have you ever worked with retina graphics? If so, when and what techniques did you use?

NO.

About retina graphics.

32. Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?

No experience. But he said this.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s