CSS3 Interview Questions

CSS3 is upgraded version of CSS with new future like Selectors, Box Model, Backgrounds and Borders, Text Effects,2D/3D Transformations, Animations, Multiple Column Layout, User Interface etc.

Below we have listed some difference between CSS and CSS3

Below is list of most important CSS3 modules are

• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

When the animation is created in the @keyframe, bind it to a selector, otherwise, the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

• Specify the name of the animation
• Specify the duration of the animation

Flexibility achieved is in the greater ratio in CSS3 because of the feature of handling multiple style sheets in CSS3 and because of the modularized approach of CSS3.

The five values that can be taken by property white-space of CSS3 are

• Normal
• pre
• nowrap
• pre-wrap
• pre-line

The possible value of the “Position” attributes are

• absolute
• fixed
• inherit
• relative
• static

word wrap/word wrapping is used to allow long words to be able to break and wrap onto the next line in css3 we used word-wrap property like below class

.wrapWord{word-wrap:break-word;}

Flexible boxes, or flexbox, is a new layout mode in CSS3. Flexbox consists of flex containers and flex items.
A flex container is declared by setting the display property of an element to either flex (rendered as a block) or inline-flex (rendered as inline).Inside a flex container, there are one or more flex items.

CSS3 transitions allow you to change property values smoothly (from one value to another), over a given duration.

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
     transition: width 2s, height 4s;
}

	style="opacity:0.4;filter:alpha(opacity=40)"

Firefox uses the property opacity:x for transparency, while IE uses

Advantages of using CSS3 animations over script-based animation techniques are as follows:

1. Easy to use and anybody can create them without the knowledge of JavaScript.
2. Executes well even under reasonable system load. As simple animations perform poorly in JavaScript, the rendering engine uses the frame-skipping techniques to allow smooth flow of animation.
3. Allows the browser to control the animation sequence, optimize performance and efficiency by reducing the update frequency of animations executing in tabs that aren’t currently visible.