CSS Interview(thatjsdude)
rapid fire questions
Q: Are CSS properties/selectors case-sensitive? No. But HTML class names are case-sensitive. Q: Why CSS selectors with mixed up casing don't apply the styles? Because, HTML ID and classes are case-sensitive. Q: Does margin-top or margin-bottom affect an inline element? No. Q: Does padding-top or padding-bottom affect an inline element? No. Q: Does padding-left or padding-right or margin-left or margin-right affect an in-line element? Yes. Q: If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes/drags the browser window? No. Q: The pseudo class ':checked' will select inputs with type radio or checkbox, but not <option> elements. False. Q: In an HTML document, the pseudo class ':root' always refers to the <html> element. True. Q: The translate() function can move the position of an element on the z-axis. False.
overflow
Q: Does 'overflow: hidden' create a new block formatting context? Yes. Extra: The overflow property deals with the content of content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto(viewport default behavior).
position
Q: How absolute, relative, fixed and static position differ? absolute: place an element exactly where you want to place it. Absolute position is actually set relative to the element's parent. If no parent is available then relatively place to the page itself. relative: placing an element based on where it would normally be placed. For example, if you set position relative to an element and set top: 10 px, it will move 10 px down from where it would be normally. fixed: element is positioned relative to viewport or the browser window itself. Viewport doesn't change if you scroll and hence fixed element will stay right in the same position. static: element will be positioned based on the normal flow of the document. Usually, you will use 'position: static' to remove other position settings that might be applied to an element.
clear
Q: How can you clear sides of a floating element? If you clear a side of an element, floating elements will not be accepted on that side. With 'clear' set to left, an element will be moved below any floating element on the left side. clear is used to stop wrap of an element around a floating element. As clear left is applied to the second box, no other elements would be on the left of that box and hence it is placed in a new row. Q: How can you fix, "floated points don't add up to the height of a parent"? You can use 'clear: both' in an empty div(<div style="clear: both;"></div>). You can use 'overflow: hidden' and you can float the parent as well. You can also use 'display: inline' if there is a double-margin bug being triggered. Setting a height and width can also fix 3px Jog. Also, can fix Bottom Margin bug by adding bottom padding on the parent. Note the three methods for clearing floats are 'The Empty div Method', 'The Overflow Method' and 'The Easy Clearing Method'( .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }). The last of the 3, uses the clever CSS pseudo selector(:after). Many CSS alignment may be avoided if you start every stylesheet with: * { margin: 0px; padding: 0px; box-sizing: border-box; }.
@import
Q: How can you load CSS resources conditionally? @import allows you to load/import a stylesheet by using a path(URI) representing the location of the file. You can define one or more media by comma separation for which you want to load the stylesheet. If the browser doesn't support the media, the stylesheet won't be loaded. Extra: If possible it is best not to use @import unless it is necessary because there are dangers, such as having a negative impact on web page performance. Use LINK instead.
media queries
Q: How could you apply CSS rules specific to media? '@media (max-width: 700 px){...}' means you want to apply rules to those media whose max-width is 700 px. This means every smaller device will have this rule. '@media (max-width: 700 px) and (orientation: landscape){...}' will apply rules for media smaller than 700 px and in landscape orientation. Q: What is the use of 'only'? To hide style sheets from older user agents. Q: Does the 'screen' keyword apply to the device's physical screen or the browser's viewport? Browser's Viewport.
vertical center
Q: How do you align a p center-center inside a div? 'text-align: center' will do the horizontal alignment but 'vertical-align: middle' will not work here. There are a couple of ways to solve this problem and one of them is positioning. You make the parent as relative position and child as absolute position. And then you define all position parameters(top, bottom, left, right) as zero and width 50% and height(30%). Extra: Newer solution is to make the parent as relative position with height, and child as absolute position with 'top: 50 %', 'left: 50 %', 'margin-right: -50 %' and 'transform: translate(-50 %, -50 %) Extra: Another new solution is to make the parent 'display: flex', 'align-items: center' and 'justify-content: center' with height, and make the child with 'margin: 0'.
optimize selector
Q: How do you optimize CSS selectors? This is very open and depends on what you are trying to achieve. If I order selectors in terms of render speed it would be like id, class, tag, siblings, child, descendant, universal, attribute, pseudo. Speed of id and class are very close. However, your code should be readable, maintainable, and DRY(Don't Repeat Yourself) along with being highly performant. The best practices in general are: avoid universal selectors, DRY, remove redundant selectors, be as specific as possible, and keep learning.
pseudo class
Q: What are some pseudo-classes you have used? Pseudo-class tells you the specific state of an element. They allow you to style elements dynamically. The most popular one is ':hover'. Besides, I have used ':visited', ':focus', ':nth-child', ':nth-of-type', ':link', etc. Pseudo classes are better if you don't want to mess up with JavaScript, however, pseudo-classes are slow to process and apply rules. Extra: pseudo-elements help you to add cosmetic content. They generate content where pseudo class deals with state of the element. For example, you can style ':first-letter' of every paragraph. Similarly, 'first-line' and fancy stuff with ':before', ':after'.
display vs visibility
Q: What are the differences between 'visibility: hidden' and 'display: none'? 'display: none' removes the element from the normal layout flow and allows other elements to fill in. 'visibility: hidden' doesn't. Extra: Something called 'reflow' is when, after browser zoom, elements are presented all in one column. This allows for only scrolling in one direction, and this is important for people with low vision. This is a part of 'Responsive Web Design'.
inline block
Q: What are the differences between inline, block and inline-block? 'inline', elements do not break the flow. Think of 'span'; it fits in the line. Important points about inline elements: 1. margin/padding will push other elements horizontally and not vertically. 2. inline elements ignore height and width. 'block', breaks the flow and does not sit inline. They are usually container like div, section, ul, and also text p, h1, etc. 'inline-block', will be similar to inline and will go with the flow of the page. Only differences is that it needs height and width defined.
filter
Q: What are the different CSS filters you can use? CSS filters allow you to render a DOM element, image, or video. You can choose from grayscale, blur, opacity, brightness, contrast, etc.
box model
Q: What are the properties related to box model? Technically, height, width, padding and border are part of the box model and margin is related to it. Extra: Everything in a web page is a box where you can control size, position, background, etc. Each box/content area is optionally surrounded by padding, border and margin. When you set the height and width of an element, you set content height and width.
preprocessor
Q: What are the reasons to use a preprocessor? You write CSS in high level with some special syntax(declaring variable, nested syntax, mathematical operations, etc.) and that is compiled to CSS. Preprocessors help you to speed up your development, simplify maintenance, ensures best practices and also confirms concatenation, compression, etc.
transition
Q: What do you know about transition? Transition allows you to add an effect while changing from one style to another. You can set the properties that you want to transition, its duration, how you want it to transit(linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start. You can transform more than one property by comma separation.
float
Q: What does float do? Float pushes an element to the sides of a page with text wrapped around it. You can create the entire page or a smaller area by using float. If the size of a floated element changes, text around it will re-flow to accommodate the changes. You can have float left, right, none, or inherit. If you set, 'float : left;' for an image, it will move to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side.
specificity
Q: What is specificity? How do you calculate specificity? It is a process of determining which CSS rules will be applied to an element. It actually determines which rules take precedence. Inline style usually wins, then id, then class value(or pseudo-class or attribute selector), universal selector(*) has no specificity.
shadow DOM
Q: What is the shadow DOM? It helps encapsulate a part of a DOM. It hides some of the subtree so you don't have to reload everything when re-rendering a web page. Polymer uses it. This allows your DOM to be reusable. If the interviewer is not happy with your answer, give him the links and tell him to spend a weekend reading it.
units
Q: Which one would you prefer among px, em, %, or pt and why? It depends on what you're trying to do. -px gives fine grained control and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is not cascade, this means if parent font-size is 20 px and child 16 px, child would be 16 px. -em maintains relative size. You can have responsive fonts. em is the width of the letter 'm' in the selected typeface. However, this concept is tricky. 1 em is equal to the current font-size of the element or the browser default. If you set font-size to 16 px then 1 em = 16 px. The common practice is to set default body font-size to 62.5% (equal to 10 px). em is cascade. -% sets font-size relative to the font-size of the body. Hence, you have to set font-size of the body to a reasonable size. This is easy to use and does cascade. For example, if parent font-size is 20 px and child font-size is 50%. Child would be 10 px. -pt (points) are traditionally used in print. 1 pt = 1/72 inch and it is a fixed-size unit.
sprite
Q: Why would you use sprites? When you have multiple images/icons because the browser makes separate calls for each one of them. A sprite can be used to combine all/some of them into one image. To display a part of the spite image, you have to set height, width and background-position. Popular libraries like bootstrap use this technique. If you repeat the image or want to scale, you should be careful with the sprite.
see & tell
Selector related Q: What would be the color of text "I am awesome" for the following rules? Sample HTML code: <ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">I am awesome</span></li> </ul> 1. <style> ul#awesome { color: red; } ul.shopping-list li.favorite span { color: blue; } </style> Answer: blue. 2. <style> ul#awesome #must-buy{ color: red; } favorite span { color: blue!important; } </style> Answer: blue. 3. <style> ul.shopping-list li .highlight { color: red; } ul.shopping-list li .highlight:nth-of-type(odd) { color: blue; } </style> Answer: blue. 4. <style> #awesome .favorite:not(#awesome) .highlight { color: red; } #awesome .highlight:nth-of-type(1):nth-last-of-type(1) { color: blue; } </style> Answer: red. Position related Q: What will happen to the position of #myDude? 1. <style> #myDude { margin-bottom: -5px; } </style> <p id="myDude">Dude</p> Answer: All the elements succeeding #myDude will move 5px upward. 2. <style> #myDude { margin-left: -5px; } </style> <p id="myDude">Dude</p> Answer: #myDude will move 5px left. Downloading resources related Q: On page load, will mypic.jpg get downloaded by the browser? 1. <style> #test2 { background-image: url('mypic.jpg'); display: none; } </style> <div id="test1"> <span id="test2"></span> </div> Answer: Yes. 2. <style> #test1 { display: none; } #test2 { background-image: url('mypic.jpg'); visibility: none; } </style> <div id="test1"> <span id="test2"></span> </div> Answer: No. Read selector related Q: What will this selector do? Sample code: [role=navigation] > ul a:not([href^=mailto]) { } Answer: This selects anchor links that are not email links that are descendants of an unordered list that is the direct child of any element with a role attribute of 'navigation'.