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.
What does the CSS rule "ul > li" specifically target?
- All li elements within a ul element.
- All li elements within an ul class.
- All ul and li elements.
- Only the direct child li elements of a ul element.
The CSS rule "ul > li" specifically targets only the direct child li elements of a ul element. It will not target li elements that are nested further within the hierarchy of the HTML structure.
How does Autoprefixing aid in ensuring cross-browser compatibility?
- Autoprefixing adds vendor-specific prefixes to CSS properties, ensuring compatibility with various browsers.
- Autoprefixing automatically generates alternate versions of your styles for different browsers.
- Autoprefixing replaces outdated CSS properties with modern equivalents.
- It converts JavaScript code to CSS for browsers that do not support modern JavaScript.
Autoprefixing is the process of adding vendor-specific prefixes to CSS properties to ensure cross-browser compatibility. It automatically generates CSS rules with the necessary prefixes, like -webkit-, -moz-, or -ms-, making sure that your styles are correctly interpreted by different browsers. This helps avoid the need for writing separate CSS rules for each browser.
What is the result when an element does not have a specific style defined but its parent does?
- The browser applies default styles to the element.
- The element inherits styles from a global stylesheet.
- The element inherits the styles from its parent.
- The element remains unstyled.
When an element does not have a specific style defined but its parent does, it will inherit the styles from its parent. This inheritance is a fundamental concept in CSS and helps maintain consistency in the appearance of web pages.
You want to target all paragraphs that are immediately after an h2 element within the same container. Which CSS selector combination will you use?
- h2 + p
- h2 > p
- h2 p
- h2 ~ p
To target all paragraphs immediately after an h2 element within the same container, you would use the selector h2 + p. This selector selects any
element that is immediately preceded by an