HTML & CSS Interview Questions and Answers

The properties of CSS 3D Transforms are:

1. transform-style: determines whether an element's children are transformed in 3D space
2. perspective: determines the distance between the viewer and the element, affecting the appearance of 3D transforms
3. perspective-origin: specifies the origin point of the perspective
4. transform: applies a 3D transformation to an element, such as rotateX(), rotateY(), rotateZ(), translateX(), translateY(),translateZ(), scale(), and skew()
5. transform-origin: specifies the origin point of the transformation
6. backface-visibility: determines whether or not the back face of an element should be visible when the element is rotated.

Color contrast measures the difference in perceived luminance between foreground text/elements and their underlying background.

### Web Content Accessibility Guidelines (WCAG 2.1) Standards:

• Level AA (Minimum Requirement):
• Normal text (< 18pt or < 14pt bold): Minimum 4.5:1 contrast ratio.
• Large text (≥ 18pt or ≥ 14pt bold): Minimum 3:1 contrast ratio.
• UI components and graphical objects: Minimum 3:1 contrast ratio.
• Level AAA (Enhanced Standard):
• Normal text: Minimum 7:1 contrast ratio.
• Large text: Minimum 4.5:1 contrast ratio.

Meeting color contrast standards ensures that users with low vision, color blindness, or those viewing screens in direct sunlight can read content effortlessly.

It is important because people with visual impairments or color blindness may have trouble seeing things if there is not enough contrast. There are guidelines for making sure there is enough contrast which makes the website content more accessible to the people.

To optimize responsive images for faster loading in CSS, you can use smaller file formats like JPEG and PNG, reduce the image size and resolution, and use lazy loading to only load images when they are needed.

A mixin is a feature in Sass that allows you to define a set of CSS styles that can be reused throughout your stylesheet. Example:

@mixin my-text-style {
 font-size: 16px;
 font-weight: bold;
}

/* we can use the whole style like this now */

h1 {
 @include my-text-style;
}