diff --git a/contents/css-questions.md b/contents/css-questions.md index 4863c7d9c..649908727 100644 --- a/contents/css-questions.md +++ b/contents/css-questions.md @@ -29,7 +29,7 @@ I would write CSS rules with low specificity so that they can be easily overridd - https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ - https://www.sitepoint.com/web-foundations/specificity/ -[[↑] Back to top](#table-of-contents) + ### What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why? @@ -42,7 +42,7 @@ I would choose resetting when I have a very customized or unconventional site de - https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css -[[↑] Back to top](#table-of-contents) + ### Describe `float`s and how they work. @@ -70,7 +70,7 @@ Alternatively, give `overflow: auto` or `overflow: hidden` property to the paren - https://css-tricks.com/all-about-floats/ -[[↑] Back to top](#table-of-contents) + ### Describe `z-index` and how stacking context is formed. @@ -90,7 +90,7 @@ _Note: What exactly qualifies an element to create a stacking context is listed - https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context -[[↑] Back to top](#table-of-contents) + ### Describe Block Formatting Context (BFC) and how it works. @@ -114,7 +114,7 @@ Vertical margins between adjacent block-level boxes in a BFC collapse. Read more - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context - https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/ -[[↑] Back to top](#table-of-contents) + ### What are the various clearing techniques and which is appropriate for what context? @@ -124,7 +124,7 @@ Vertical margins between adjacent block-level boxes in a BFC collapse. Read more In large projects, I would write a utility `.clearfix` class and use them in places where I need it. `overflow: hidden` might clip children if the children is taller than the parent and is not very ideal. -[[↑] Back to top](#table-of-contents) + ### Explain CSS sprites, and how you would implement them on a page or site. @@ -143,7 +143,7 @@ CSS sprites combine multiple images into one single larger image. It is a common - https://css-tricks.com/css-sprites/ -[[↑] Back to top](#table-of-contents) + ### How would you approach fixing browser-specific styling issues? @@ -153,7 +153,7 @@ CSS sprites combine multiple images into one single larger image. It is a common - Use Reset CSS or Normalize.css. - If you're using Postcss (or a similar transpiling library), there may be plugins which allow you to opt in for using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into corresponding safe code that will work in the targets you've used. -[[↑] Back to top](#table-of-contents) + ### How do you serve your pages for feature-constrained browsers? What techniques/processes do you use? @@ -164,7 +164,7 @@ CSS sprites combine multiple images into one single larger image. It is a common - Feature detection using [Modernizr](https://modernizr.com/). - Use CSS Feature queries [@support](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) -[[↑] Back to top](#table-of-contents) + ### What are the different ways to visually hide content (and make it available only for screen readers)? @@ -184,7 +184,7 @@ Even if WAI-ARIA is the ideal solution, I would go with the `absolute` positioni - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA - http://a11yproject.com/ -[[↑] Back to top](#table-of-contents) + ### Have you ever used a grid system, and if so, what do you prefer? @@ -192,13 +192,13 @@ Before Flex became popular (around 2014), the `float`-based grid system was the For the adventurous, they can look into [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/), which uses the shiny new `grid` property; it is even better than `flex` for building grid layouts and will be the de facto way to do so in the future. -[[↑] Back to top](#table-of-contents) + ### Have you used or implemented media queries or mobile-specific layouts/CSS? Yes. An example would be transforming a stacked pill navigation into a fixed-bottom tab navigation beyond a certain breakpoint. -[[↑] Back to top](#table-of-contents) + ### Are you familiar with styling SVG? @@ -225,7 +225,7 @@ The above `fill="purple"` is an example of a _presentational attribute_. Interes - https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes -[[↑] Back to top](#table-of-contents) + ### Can you give an example of an @media property other than screen? @@ -250,7 +250,7 @@ Here is an example of `print` media type's usage: - https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax -[[↑] Back to top](#table-of-contents) + ### What are some of the "gotchas" for writing efficient CSS? @@ -265,7 +265,7 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep - https://developers.google.com/web/fundamentals/performance/rendering/ - https://csstriggers.com/ -[[↑] Back to top](#table-of-contents) + ### What are the advantages/disadvantages of using CSS preprocessors? @@ -283,7 +283,7 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep - Requires tools for preprocessing. Re-compilation time can be slow. - Not writing currently and potentially usable CSS. For example, by using something like [postcss-loader](https://github.com/postcss/postcss-loader) with [webpack](https://webpack.js.org/), you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new skills that could pay off if/when they become standardized. -[[↑] Back to top](#table-of-contents) + ### Describe what you like and dislike about the CSS preprocessors you have used. @@ -297,13 +297,13 @@ Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, rep - I use Sass via `node-sass`, which is a binding for LibSass written in C++. I have to frequently recompile it when switching between node versions. - In Less, variable names are prefixed with `@`, which can be confused with native CSS keywords like `@media`, `@import` and `@font-face` rule. -[[↑] Back to top](#table-of-contents) + ### How would you implement a web design comp that uses non-standard fonts? Use `@font-face` and define `font-family` for different `font-weight`s. -[[↑] Back to top](#table-of-contents) + ### Explain how a browser determines what elements match a CSS selector. @@ -315,7 +315,7 @@ For example with this selector `p span`, browsers firstly find all the `` - https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left -[[↑] Back to top](#table-of-contents) + ### Describe pseudo-elements and discuss what they are used for. @@ -329,7 +329,7 @@ A CSS pseudo-element is a keyword added to a selector that lets you style a spec - https://css-tricks.com/almanac/selectors/a/after-and-before/ -[[↑] Back to top](#table-of-contents) + ### Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models. @@ -354,7 +354,7 @@ The box model has the following rules: - https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model -[[↑] Back to top](#table-of-contents) + ### What does `* { box-sizing: border-box; }` do? What are its advantages? @@ -368,7 +368,7 @@ The box model has the following rules: - https://www.paulirish.com/2012/box-sizing-border-box-ftw/ -[[↑] Back to top](#table-of-contents) + ### What is the CSS `display` property and can you give a few examples of its use? @@ -385,7 +385,7 @@ The box model has the following rules: | `table-cell` | Behaves like the `