CSS3 Interview Questions

41. List some advantages to CSS3 animations over script-based animation?

Ans:

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.
Difference Between CSS2 and CSS3

• Modules
• Media Queries
• Namespaces
• Selectors
• Color

1) CSS3 Modules
1) The main difference between CSS2 and CSS3 is that CSS3 divided into two different sections Called Modules.
2) In CSS2 everything is submitted as a single document with all the Cascading Style Sheets information within it.
3) These Modules are much easier for different browsers to accept various aspects of CSS3 and implement.
4) There is a wider range of browser support for CSS3 Modules over CSS and CSS2.

CSS3 Modules List

• Selectors
• Box Model
• Backgrounds
• Image Values and Replaced Content
• Text Effects
• 2D Transformations
• 3D Transformations
• Animations
• Multiple Column Layout
• User Interface

2) CSS3 Media Queries
1) In CSS2, we have Media Types, users can define different style rules for different media types like computer screens, printers, and handled devices.
2) But in CSS3, instead of using Media Types, extended the CSS2 Media Types idea with Media Queries.
3) Unlike looking for a type of device in CSS2 media type, CSS3 Media Queries look at the capability of the device.
4) CSS3 media queries look for width and height of the viewport, width, and height of the device, orientation, and resolution of the screen.
CSS3 Media Types

• all – Used for all media type devices
• print – Used for printers
• screen – Used for computer screens, tablets, smart-phones etc.
• speech – Used for screenreaders that “reads” the page out loud

CSS3 Media Query Example

If the viewport is minimum 480 pixels or widee then the body backgroud color will be changed to blue.

@media screen and (min-width: 480px) {
body {
background-color: blue;
}
}

3) CSS3 Namespaces
This CSS Namespaces module defines syntax for using namespaces in CSS. It defines the @namespace rule for declaring a default namespace and for binding namespaces to namespace prefixes.
@namespace “http://www.w3.org/1999/xhtml”;
@namespace svg “http://www.w3.org/2000/svg”;
The first rule declares a default namespace http://www.w3.org/1999/xhtml to be applied to names that have no explicit namespace component.
The second rule declares a namespace prefix svg that is used to apply the namespace http://www.w3.org/2000/svg where the svg namespace prefix is used.
4) CSS3 Selectors
In CSS3, there are few new Selectors and pseudo-elements are introduced, let’s discuss them.
1) attribute beginning matches exactly
element[foo^=”bar”]
The element has an attribute called foo that begins with “bar” e.g.
2) attribute ending matches exactly
element[foo$=”bar”]
The element has an attribute called foo that ends with “bar” e.g.
3) attribute contains the match
element[foo*=”bar”]
The element has an attribute called foo that contains the string “bar” e.g.
CSS3 new pseudo-classes:
:root
The root element of the document. In HTML this is always
:nth-child(n)
use this to match exact child elements or use variables to get alternating matches
:nth-last-child(n)
match exact child elements counting up from the last one
:nth-of-type(n)
match sibling elements with the same name before it in the document tree
:nth-last-of-type(n)
match sibling elements with the same name counting up from the bottom
:last-childmatch
the last child element of the parent
:first-of-typematch
the first sibling element of that type
:last-of-typematch
the last sibling element of that type
:only-childmatch
the element that is the only child of its parent
:only-of-typematch
the element that is the only one of its type
:emptymatch
the element that has no children (including text nodes)
:targetmatch
an element that is the target of the referring URI
:enabledmatch
the element when it’s enabled
:disabledmatch
the element when it’s disabled
:checkedmatch
the element when it’s checked (radio button or checkbox)
:not(s)
match when the element does not match the simple selectors
New CSS3 Style Properties
Many graphics related properties are introduced in CSS3.
1) Border-radius or box-shadow, flexbox or even CSS Grid are newer styles introduced in CSS3.
2) In CSS3 the box model not changed but using new style properties users can change background, border and styles of a box.
3) In CSS3 using properties like background-image, background-position, and background-repeat styles users can specify multiple background images to be placed on top of one another.
4) CSS3 background-clip property defines how the background image should be clipped.
5) CSS3 background-origin property determines whether the background should be placed in the padding box, the border box, or the content box.
6) CSS3 background-size property allows you to indicate the size of the background image. This property allows users to stretch smaller images to fit the page.
7) CSS borders can be the styles of solid, double, dashed, and image. In addition to existing boarder properties CSS3 brings in the ability to create rounded corners.
8) There are some new border-radius properties are introduced in CSS3.
9) border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radiusThese properties allow you to create rounded corners on your borders.
10) border-image-source – Specifies the image source file to be used instead of border styles already defined.
11) border-image-slice – Represents the inward offsets from the border image edges
12) border-image-width – Defines the value of the width for your border image
13) border-image-outset – Specifies the amount that the border image area extends beyond the border box
14) border-image-stretch – Defines how the sides and middle parts of the border image should be tiled or scaled
15) border-image – The shorthand property for all the border image properties
16) column-width – Defines the width of your columns should be.
17) column-count – Defines the number of columns on the page.
18) columnsShorthand property where you can define either the width or number.
19) column-gap Defines the width of the gaps between the columns.
20) column-rule-color Defines the color of the rule.
21) column-rule-style Defines the style of the rule (solid, dotted, double, etc.)
22) column-rule-width Defines the width of the rule
23) column-rule A shorthand property defining all three column rule properties at once.
24) CSS Template layout module and CSS3 Grid positioning module- creating grids with CSS
25) CSS3 Text module – outline text and even create drop-shadows with CSS
26) CSS3 Color module – with opacity
27) Changes to the box model – including a marquee property that acts like the IE tag
28) CSS3 User Interface module – giving you new cursors, responses to actions, required fields, and even resizing elements
29) CSS3 Ruby module – provides support for languages that use textual ruby to annotate documents
30) CSS3 Paged Media module – for even more support for paged media (paper, transparencies, etc)
31) Generated content – running headers and footers, footnotes, and other content that is generated programmatically, especially for paged media
32) CSS3 Speech module – changes to aural CSS
33) CSS3 supports additional color properties like RGBA colors, HSL colors, HSLA colors, Opacity.