What is the difference between em and rem units in CSS font sizing?
- Relative to the browser's default font-size
- Relative to the font-size of the element itself
- Relative to the font-size of the nearest parent
- Relative to the root element's font-size
In CSS, 'em' and 'rem' units are used for font sizing, but they differ in their reference point. Understanding their differences is crucial for responsive design and consistent typography.
In CSS preprocessors like SASS and LESS, what feature allows you to use the same piece of CSS in multiple places?
- Functions
- Mixins
- Selectors
- Variables
Mixins in CSS preprocessors like SASS and LESS allow you to reuse the same piece of CSS in multiple places. By defining a mixin, you can encapsulate a set of styles and then include it wherever needed, promoting code modularity and maintainability. Variables, functions, and selectors are also important features but serve different purposes.
During a site audit, you notice that unminified CSS is delaying the page's Load Time. Which CSS minification and optimization technique would you recommend to improve performance?
- Tree shaking
- CSS gzip compression
- Optimize CSS delivery using a Content Delivery Network (CDN)
- Use CSS sprites for background images
Minifying and compressing CSS with gzip reduces file size and speeds up load time. Other options may offer benefits, but CSS gzip compression directly addresses unminified CSS impacting load time.
Which tool can be typically used for cross-browser testing of web applications?
- Adobe Photoshop
- BrowserStack
- CodePen
- GitLab CI
BrowserStack is a popular tool for cross-browser testing, allowing developers to test their web applications on various browsers and devices to ensure a consistent user experience.
When should a developer consider removing vendor prefixes from their CSS, and what is the risk associated with this action?
- After extensive testing on all browsers
- As soon as the feature is supported without prefixes
- Only when using experimental features
- When the codebase becomes too large
Developers should remove vendor prefixes when the CSS feature is universally supported without prefixes. The risk lies in premature removal, potentially causing compatibility issues in browsers that still require prefixes for the given feature.
A developer is using Styled Components in a React project and needs to style a button differently based on its active state. Which feature of Styled Components should they use to achieve this?
- &:active
- &:focus
- &:hover
- &:visited
In Styled Components, the &:active pseudo-class is used to style a component when it is being activated, which is commonly associated with the active state of a button.
A designer wants to ensure that the spacing between paragraphs remains proportional to the user's default browser font size. Which CSS unit should they use to define the margin and padding of the paragraphs?
- %
- em
- px
- rem
The 'em' unit is relative to the font-size of the element, providing a proportional measure. It's suitable for maintaining spacing relative to the user's default font size.
What CSS property is used to change the alignment of text?
- text-align: justify;
- text-decoration: align;
- align-content: center;
- text-align: center;
The correct option is text-align: center;. This property is used to horizontally align text. text-align can take values like left, right, center, etc. The other options are incorrect or do not exist in CSS.
You are designing a website for accessibility and need to ensure that text can be resized without breaking the layout. Which CSS units should you consider using for font sizes to achieve this?
- em
- px
- rem
- vw
To achieve text resizing without affecting layout, using relative units like rem (root em) is ideal. Unlike em, which is relative to the parent, rem is always relative to the root element. This ensures consistent scaling throughout the page, promoting accessibility.
Which CSS units are considered to be relative units that allow for responsive designs?
- em, rem
- in, mm
- pt, pc
- px, cm
em and rem are relative units in CSS, enabling responsive design. Unlike absolute units like px, em and rem adapt to the font size of the parent or root element, respectively. This flexibility makes them valuable for creating layouts that adjust to different screen sizes and user preferences.