Skip to main content

CSS INTERVIEW QUESTIONS SET 2

 



You make also like this CSS interview question set 1.

Let's begin with set 2,

5)What is the difference between opacity 0 vs display none vs visibility hidden?

Property           | occupies space | consumes clicks |

+--------------------+----------------+-----------------+

| opacity: 0         |        yes      |        yes       |

+--------------------+----------------+-----------------+

| visibility: hidden |        yes       |        no        |

+--------------------+----------------+-----------------+

| display: none      |        no       |        no        |


When we say it consumes click, that means it also consumes other pointer-events like onmousedown,onmousemove, etc.


In essence "visibility: hidden" behaves like a combination of "opacity: 0" and "pointer-events: none".

6)CSS 3 new features?

CSS3 allows developers to style HTML elements easier. 
They are less dependent on image files 
and can complete CSS styling with fewer lines of code.
CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. 
It brings a lot of new features and additions, like rounded corners, shadows, gradients,
 transitions or animations, as well as new layouts like multi-columns, 
flexible box or grid layouts.

Box Shadow
One of the CSS3 new features is the box-shadow property that adds a shadow to an element. Instead of using multiple images around an item, this property lets you add shadow with a short line of code.

Opacity
One of the CSS3 properties called opacity makes elements see-through or completely transparent.

For instance, you can apply opacity to images or other HTML elements. The transparency level depends on the indicated values.

Rounded Corners
Before the release of CSS3, developers had to write long code to produce rounded corners.
 Now, it is enough to apply the border-radius CSS3 property to HTML elements.

New Colors
One of the CSS3 features is the addition of new colors:

RGBA
HSL
HSLA
Gradient Colors

Attribute Selectors:
CSS3 also introduced new selectors in addition to the ones in CSS2.
Instead of applying IDs or classes for styling, developers can select HTML elements according to their attributes.

Refer to this link for a detailed study.


7)Css 3 flexbox ?

The Flexible Box Layout Module, 
makes it easier to design flexible responsive layout structure without
using float or positioning.
Before the Flexbox Layout module, there were four layout modes:
Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for the explicit position of an element
a)To start using the Flexbox model, you need to first define a flex container.
b)The flex container becomes flexible by setting the display property to flex:

Check this link for more details https://www.w3schools.com/css/css3_flexbox.asp.

I hope you like this article.
Please stay connected for the CSS interview questions set 3.
 
You can also follow me on Twitter or Linkedin for the latest updates.

Written By:

Saurabh Joshi

Comments

Post a Comment

Popular posts from this blog

Coding Interview Questions Set 1

From this article, I will be sharing with you all a series of articles on coding interview questions. So please stay connected for the latest set of questions. It will be a good brainstorming exercise and will also prepare you for coding interviews and will definitely boost your confidence. So let's start, 1)Reverse of a string with only O(1) extra memory. Solution: var reverse = function(string) {     let result = ''     for(let i= string.length -1; i >= 0; i--){         result += string[i];     }     return result; }; 2)Fizz Buzz: Write a program that will accept a number n and will output number till n but for multiples of three it should output “Fizz” instead of the number and for the multiples of five output “Buzz”. For numbers which are multiples of both three and five output “FizzBuzz”. Solution: var fizzBuzz= function(n) {     const arr=[]     for(i=1; i<=n; i++){ ...
9 comments
Read more

Node.js: Bundling your Node.js application to single executable for Windows.

In this article, we will see how to bundle Node.js application to a single executable for Windows. What's the need? Well recently, I had taken a work where I needed to convert pdf's(Of similar format) to excel sheet. So I was reading the pdf's from a folder in desktop and I was storing the output excel sheet into a separate folder on the desktop. I used Node.js for the program. Now the client wanted it to install the program on 25 windows machine and his budget was really low. So it was also not possible for me to install node.js for 25 machines and then install the required dependency for each one. One of the solution: While I was searching for an easy solution I found this amazing npm module pkg . This module can make your node.js app work like plug and play type. No need to install Node.js on the client machine or any other dependency.  It helps to make a commercial or trial version of your node.js application without exposing the source code. I found ...
Post a Comment
Read more

Understanding TypeScript: A Guide to Interview Questions

1) Advantages of TypeScript TypeScript offers several advantages over plain JavaScript: Static Typing: TypeScript introduces static typing, allowing developers to define types for variables, function parameters, and return values. This helps catch type-related errors during development and provides better code documentation. Enhanced Tooling: TypeScript provides improved tooling support, including features like code completion, refactoring, and navigation, which enhance developer productivity. Readability and Maintainability: With explicit type annotations, TypeScript code tends to be more readable and self-documenting. This makes it easier for developers to understand and maintain large codebases. Early Error Detection: TypeScript's type system catches many common errors at compile-time, such as type mismatches and missing properties, reducing the likelihood of runtime errors. Example: typescript Copy code // Plain JavaScript function greet(name) {     return 'Hello, ' + n...
Post a Comment
Read more