Which tool can be used to automatically add vendor prefixes to CSS properties?
- Babel
- ESLint
- PostCSS
- Webpack
PostCSS is a popular tool used in web development to automatically add vendor prefixes to CSS properties. It is highly configurable and can be integrated into your build process. PostCSS, along with plugins like Autoprefixer, streamlines the process of making your CSS code cross-browser compatible by adding the necessary prefixes.
If you want to vertically center an inline or inline-block element relative to its parent, you'd set "vertical-align" to ________.
- baseline
- center
- middle
- top
To vertically center an inline or inline-block element relative to its parent, you'd set the "vertical-align" property to middle. This property allows you to control the vertical alignment of inline-level elements within their line boxes.
What is SASS primarily used for in web development?
- Styling web pages with JavaScript
- Compiling code into machine language
- Enhancing website security
- Simplifying and organizing CSS
SASS (Syntactically Awesome Style Sheets) is primarily used in web development for simplifying and organizing CSS. It introduces features like variables, nesting, and mixins, making your CSS more maintainable and efficient.
The CSS function clamp() restricts a value between a specified ______ and ______.
- left, right
- lower, upper
- minimum, maximum
- start, end
The CSS clamp() function is used to restrict a value between a specified minimum and maximum value. It allows for responsive design by ensuring that the value falls within this range, helping to maintain a consistent layout across different screen sizes.
The animation-direction property can be set to ________ to make the animation play in reverse direction.
- alternate
- backwards
- paused
- reverse
The "animation-direction" property in CSS allows you to control the direction of an animation. Setting it to "reverse" will make the animation play in the reverse direction, essentially rewinding the animation.
How can you target an ordered list and its list items in a single CSS selector?
- ol + li { ... }
- ol / li { ... }
- ol li { ... }
- ol, li { ... }
To target both an ordered list (ol) and its list items (li) in a single CSS selector, you should use "ol li" without any comma or additional characters. This selector will apply styles to all li elements within an ol element.
Which value of animation-fill-mode ensures the animation's styles are applied before the animation begins?
- backwards
- both
- forwards
- none
The value of animation-fill-mode that ensures the animation's styles are applied before the animation begins is backwards. When you set animation-fill-mode to backwards, the element retains the styles of the first keyframe until the animation begins. This can be useful to set initial styles before the animation starts.
In a responsive design, you have a sidebar that should stick to the top after scrolling past its initial position but stop sticking when it reaches the footer. Which positioning property would you apply to the sidebar?
- Absolute
- Fixed
- Relative
- Sticky
To create a sidebar that sticks to the top after scrolling past its initial position but stops sticking when it reaches the footer, you should apply the "position: sticky" property. It maintains the element's natural position until a specified scrolling threshold is reached, and then it behaves as if it were fixed.
What does the "forwards" value for the "animation-fill-mode" property do?
- It makes the animation continue in its final state after completion.
- It repeats the animation indefinitely.
- It reverses the animation direction.
- It sets the animation to be paused.
The "forwards" value for the "animation-fill-mode" property makes the animation continue in its final state after completion. It ensures that the final keyframe of the animation is retained as the end state even after the animation completes.
Animating properties like opacity and transform is considered more performant because they don't trigger ________ in most browsers.
- redraws
- relayouts
- repaints
- rerenders
When certain properties like opacity and transform are animated, they are considered more performant because they typically don't trigger relayouts or "reflows" in most browsers. Relayouts are costly in terms of performance and can significantly slow down animations.