How can you set a fallback font in case the primary font fails to load?
- Use the font-alt property.
- Use the font-fallback property.
- Use the font-family property with multiple font names in a comma-separated list.
- Use the font-stack property.
To set a fallback font in case the primary font fails to load, you can use the font-family property and specify multiple font names in a comma-separated list. The browser will use the first font in the list that it can find and load. This ensures that even if the primary font is unavailable, the text will still be displayed using an alternative font.
Autoprefixing tools parse CSS and add or remove vendor prefixes based on data from ________.
- Browser user agents
- Developer preferences
- JavaScript engines
- The CSS Working Group
Autoprefixing tools, like Autoprefixer, analyze CSS and add or remove vendor prefixes to ensure compatibility across different browsers. They use data from browser user agents (e.g., Chrome, Firefox) to determine which prefixes are required for specific CSS properties.
When you want to generate multiple class or ID variations in SASS, you would typically use ________.
- Functions
- Nesting
- Placeholder selectors
- Variables
When you want to generate multiple class or ID variations in SASS, you would typically use placeholder selectors, also known as %placeholders. These selectors allow you to define styles that can be included in other selectors using the @extend directive, promoting reusability and ensuring cleaner CSS output.
What is the total width of an element (including padding and border) when the 'box-sizing' property is set to 'content-box'?
- The total width includes padding and border.
- The total width is calculated differently based on the 'box-sizing' property.
- The total width is the content width plus margin.
- The total width is the same as the content width.
When 'box-sizing' is set to 'content-box,' the total width of an element includes padding and border. The content width does not include these, but the total width does.
The technique where a low-quality font is shown first and then replaced by a higher-quality font when it's loaded is known as ________.
- Font FOUT (Flash of Unstyled Text)
- Font Preloading
- Font Replacement
- Font Switching
The technique where a low-quality or system font is displayed initially and then replaced with a higher-quality custom font when it's loaded is known as "Font FOUT" or "Flash of Unstyled Text." This approach improves perceived performance and ensures a smoother transition between fonts.
What does the animation-fill-mode: forwards; property-value combination do?
- Applies styles defined in the keyframes to the element before the animation starts
- Holds the final keyframe styles after the animation finishes
- Keeps the animation running indefinitely
- Stops the animation as soon as it completes
The animation-fill-mode: forwards; property-value combination holds the final keyframe styles after the animation finishes. This means that after the animation completes, the element retains the styles from the final keyframe. This can be useful for maintaining a particular state after the animation finishes.
How does an element with position: sticky; behave when scrolling past its container?
- It becomes transparent.
- It disappears from the layout.
- It remains fixed in its original position.
- It scrolls with the container.
When an element has a 'position: sticky;' property and scrolls past its container, it sticks to the container until it reaches a specified offset, after which it scrolls along with the container. This behavior is often used for navigation bars.
What property is commonly used to control the speed curve of the transition effect?
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
The property commonly used to control the speed curve of a transition effect in CSS is transition-timing-function. This property allows you to specify how the intermediate property values are calculated over the duration of the transition, giving you control over the timing and pace of the transition.
You want to design a heartbeat animation where a heart icon grows and shrinks continuously. How would you ensure the animation runs smoothly in both directions?
- rotate transformation with CSS transitions
- scale transformation with CSS animations
- skew transformation with CSS animations
- translate transformation with CSS keyframes
To create a smooth heartbeat animation that makes an icon grow and shrink, you should use the scale transformation with CSS animations. This allows you to scale an element up and down smoothly, ensuring it runs seamlessly in both directions.
The CSS pseudo-class :not() allows you to target elements that ________ a specific criteria.
- Contradict
- Fail
- Match
- Meet
The CSS pseudo-class :not() is used to select elements that do not match a specific criteria. It is used to exclude elements that would typically be selected by a CSS selector. For example, :not(.classname) selects all elements that do not have the specified class.