Jun
CSS3 Interview Questions
- Tony Thomas
- 14th Jun, 2022
- 338 Followers
CSS3 Interview Questions
CSS3 Interview Questions
1) What is the difference between CSS and CSS3 ?
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
| CSS | CSS 3 |
|---|---|
| CSS is the basic version so it doesn’t support responsive design, and cannot handle media queries. | CSS3 supports responsive design, and can also handle media queries. This feature adds entirely new responsive design capabilities to the CSS repertoire. |
| `CSS cannot split into varied modules | Css3 can split into modules. |
| CSS is comparatively slower than CSS3 | It is faster than all its previous versions |
| The user cannot create 3D transformations and animations using CSS | The user can easily create 3D transformations, transitions, and animations using CSS3. For the very first time, elements can move on screen without the help of Flash code or JavaScriopt. Elements can also change their size and color. |
| It has old and standard colors. | New colors have been added in CSS3. It supports RGBA, HSLA, HSL and gradient colors. Another achievement for CSS3 is that it can now support the effect of rounded image corners. |
| It doesn’t have any box-sizing tool. The user has to follow the standard procedures to align the text. | All the alignment problems are now fixed by the Box- Sizing tool. This tool allows its user to get the right size for their element without having to subtract dimensions for padding and borders. |
| CSS or cascading style sheets is the key element for web designing. Both CSS and CSS3 is more or less the same thing i.e. both are web designing tools. | CSS3 is nothing but an upgraded version of CSS. Just like HTML5 is an upgraded version of the basic HTML. This version comes with the above-mentioned features and hence is a better tool for web designing. |
2) List out CSS3 modules?
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
3) What is the CSS3 animation?
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
4) Explain How flexibility is achieved more in CSS3?
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.
5) Explain What are the values that can be taken by property white-space of CSS3?
The five values that can be taken by property white-space of CSS3 are
- Normal
- pre
- nowrap
- pre-wrap
- pre-line
6) What are the possible values of the “Position” attributes?
The possible value of the “Position” attributes are
- absolute
- fixed
- inherit
- relative
- static
7) What is the word wrap/word wrapping in CSS3?
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;}
8) What is CSS3 Flexbox?
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.
9) What are CSS3 Transitions?
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;
}
10) What is the syntax of opacity in CSS3?
style="opacity:0.4;filter:alpha(opacity=40)"
Firefox uses the property opacity:x for transparency, while IE uses
11) List some advantages to CSS3 animations over script-based animation?
Advantages of using CSS3 animations over script-based animation techniques are as follows:
- Easy to use and anybody can create them without the knowledge of JavaScript.
- 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.
- 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.
Leave A Comment :
Valid name is required.
Valid name is required.
Valid email id is required.
