CSS Questions Flashcards
What is CSS selector specificity and how does it work?
In CSS, specificity is a measurement of relevance based on the type and order of CSS selectors in a document. In cases when an HTML element or a group of elements is targeted by multiple CSS selectors, the rules of CSS specificity tell the web browser which CSS declarations should be applied.
The “specificity hierarchy,” which lists selector types from the highest specificity to the lowest specificity:
- ID selectors: ID selectors are the most specific kind of selector. They select an element based on its ID attribute (e.g., #my-id).
*Class selectors, attribute selectors, and pseudo-class selectors: These three selector types have equal specificity.
*Class selectors select all elements in a CSS class (e.g., .my-class).
*Attribute selectors select all elements with a given attribute (e.g., p[target]). - Pseudo-class selectors select elements only when in a special state, like visited or hover (e.g., button:hover).
- Type selectors: These select all HTML elements that have a given node name and have the syntax element (e.g., div).
- Universal selector: The universal selector (*) has no effect on specificity.
Rule 1: The CSS selector with higher specificity applies.
Rule 2: If CSS selectors have equal specificity, then the last rule in the document applies.
Rule 3: Inline CSS has the highest specificity.
What’s the difference between “resetting” and “normalizing” CSS?Which would you choose, and why?
Normalizing retains the default styles that are useful and removes those that are not whereas the reset removes all the styles of the browser. In reset, we will have to re declare all the styles after resetting the browser whereas, normalizing will keep the required styles and only removes the unwanted ones.
Describe Floats and how they work.
he float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
Describe z-index and how stacking context is formed.
Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).
A stacking context is created when an element is positioned and assigned a z-index value other than auto , or when an element has an opacity value less than 1.
Describe BFC (Block Formatting Context) and how it works.
A block formatting context (BFC) is a part of a visual CSS rendering of a web page. It’s the region in which the layout of block boxes occurs and in which floats interact with other elements. A block formatting context is created by at least one of the following: The root element of the document ( <html> ).
What are the various clearing techniques and which is appropriate for what context?
Empty div method: <div style="clear:both;"></div>.
Clearfix method: Refer to the .clearfix class above.
overflow: auto or overflow: hidden method:
Parent will establish a new block formatting context and expand to contains its floated children.
In large projects, having a utility .clearfix class will be very helpful. overflow: hidden might clip children if the children is higher than the parent and is not very ideal.
How would you approach fixing browser-specific styling issues?
After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.
Use libraries like Bootstrap that already handles these styling issues for you.
Use autoprefixer to automatically add vendor prefixes to your code.
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.
How do you serve your pages for feature-constrained browsers?What techniques/processes do you use?
- Graceful degradation - The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
- Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
- Use caniuse.com to check for feature support.
Autoprefixer for automatic vendor prefix insertion.
*Feature detection using Modernizr.
*Use CSS Feature queries @support
What are the different ways to visually hide content (and make it available only for screen readers)?
These techniques are related to accessibility (a11y).
- width: 0; height: 0. Make the element not take up any space on the screen at all, resulting in not showing it.
- position: absolute; left: -99999px. Position it outside of the screen.
- text-indent: -9999px. This only works on text within the block elements. This is a widely used and famous trick, but it comes with some downsides like causing performance issues, so you might want to consider using text-indent: 100% instead.
- Meta tags. For example by using Schema.org, RDF, and JSON-LD.
- WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages.
Even if WAI-ARIA is the ideal solution, I would go with the absolute positioning approach, as it has the least caveats, works for most elements and it’s an easy technique.
Have you ever used a grid system, and if so, what do you prefer?
Flex is the recommended approach for building grid systems and has decent browser support. But I am almost confident that with the broader adoption of CSS Grid, it will turn into the main layout standard.
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.
Are you familiar with styling SVG?
(inline CSS) Basic coloring can be done by setting two attributes on the node: fill and stroke. fill sets the color inside the object and stroke sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that’s color names (that is red), RGB values (that is rgb(255,0,0)), Hex values, RGBA values, etc.
Can you give an example of an @media property other than screen?
all - for all media type devices
print - for printers
speech - for screenreaders that “reads” the page out loud
What are some of the “gotchas” for writing efficient CSS?
The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.
BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
What are the advantages/disadvantages of using CSS preprocessors? Describe what you like and dislike about the CSS preprocessors you have used.
Advantages:
CSS is made more maintainable.
Easy to write nested selectors.
Variables for consistent theming. Can share theme files across different projects.
Mixins to generate repeated CSS.
Sass features like loops, lists, and maps can make configuration easier and less verbose.
Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.
Disadvantages:
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 with webpack, 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.
How would you implement a web design comp that uses non-standard fonts?
Likes:
Mostly the advantages mentioned above.
Less is written in JavaScript, which plays well with Node.
Dislikes:
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.
