Explore topic-wise InterviewSolutions in .

Different ways to fix browser-specific issues.

• We can write browser-specific styles separately in different sheets and load that only when the specific browser is used. This makes use of the server-side rendering technique.
• We can use auto-prefix for automatically adding vendor prefixes in the code.
• We can also use normalize.css or RESET CSS techniques.

There are some ways for AVOIDING browser compatibility issues too. They are as follows:

• Validate HTML and CSS: We know that the code will be read, interpreted and handled differently by different browsers. We need to validate our HTML and CSS files for the missing closing tags, or missing semicolons in the syntaxes because there are chances that the old browsers will throw errors while rendering the code. We can avoid those errors by:
  • Maintaining well-aligned code that helps in easy readability.
  • Inserting comments at necessary places.
  • Make use of validation tools like Jigsaw CSS validator, W3C HTML Validators to identify syntax issues in the code.
• Maintain Cross-Browser Compatibility in the Layouts: Cross-Browser compatibility is a must while developing web applications. We expect our application to be responsive across all devices, browsers and platforms. Some of the effects of layout incompatibilities are unresponsiveness of the layouts in mobile devices, the difference in layout rendering between modern and old browsers, etc. These incompatibilities can be avoided by using:
  • CSS Multi-Column layouts - For maintaining proper layouts w.r.t columns and containers.
  • HTML viewport metatag – For ensuring content is properly spanned across mobile devices.
  • CSS Flexbox and Grids - To layout child elements depending on the content and available space.
  • CSS resets stylesheets - For reducing browser inconsistencies in default line heights, font sizes, margins etc.
• Check JavaScript Library issues: Ensure the libraries are used judiciously and the ones used are supported by the browsers.
• Check DOCTYPE tag keyword: The DOCTYPE keyword is meant for defining rules of what NEEDS to be used in the code. Older browser versions check for DOCTYPE tag at the beginning and if not found, the application rendering won't be proper.
• Test on real devices: Although applications can be tested on virtual environments, it would be more beneficial if the testing is carried out on real devices and platforms. We can use tools like Testsigma for this purpose that enables us to test in real devices parallelly.

CSS plays the most important role in the field of web development. This is because CSS helps in achieving beautiful, responsive or adaptive websites depending on the business requirements. CSS helps in building lighter and flexible layouts that help in loading pages faster and making the content visually appealing. CSS is continuously evolving and is becoming more powerful thereby making it the most sought-after technology by various companies to develop websites. In this article, we have SEEN the most commonly asked interview questions in CSS, more particularly CSS3.

Useful Resources

• CSS Guides
• HTML
• Coding Practice
• JavaScript
• SASS Vs SCSS
• HTML/CSS Books

The clear property ALONG with floats is used for specifying which SIDE of floating elements is not supposed to float. An element having clear property ensures that the element does not move up ADJACENT to the float. But the element will be moved down past the float.

Let us understand this with the help of an example. We know that the floated objects do not add to the height of the objects where they reside. Consider we have a div element with class “floated_div” within another div element with id “main_div”.

The result of this code would be as shown below. We see that the squares that are expected to be within dev are not within the main parent div. How do we fix this?

We can do it just by adding <div style="clear:both"></div> line at the end of the last floated element so that the floated elements are fit in properly within the main div container.

The result of this will be:

Tweening is the process of filling the gaps between the key sequences, i.e between the keyframes that are already created. Keyframes are those frames that represent start and end point of animation action. Tweening involves generating intermediate keyframes between two images that give the impression that the first one has evolved smoothly to the second image. For this purpose, we use properties like transforms - matrix, translate, scale, rotate etc.

In the below example, we are generating intermediate frames of paragraph elements to SLIDE through from the start to the right edge of the browser.

Here, the paragraph element specifies that the animation process should take 2 seconds for execution from start to the finish. This is done by using the animation-duration property. The animation-name of the @keyframes is DEFINED by using the property animation-name. The intermediate keyframes are defined by using @keyframes rule. In the example, we have just 2 keyframes. The first keyframe starts at 0% and runs till the left margin of 100% which is the rightmost edge of the containing element. The second keyframe starts at 100% where the left margin is set as 0% and the width to be set as 100% which results in finishing the animation flush against the left edge of the CONTAINER AREA.

CSS sprites are used for combining multiple images in a single larger image. They are commonly used for representing icons that are used in the user interfaces. The main advantages of using sprites are:

• It reduces the number of HTTP requests to get data of multiple images as they are acquired only by sending a single request.
• It helps in downloading assets in advance that help display icons or images upon hover or other pseudo-states.
• When there are multiple images, the BROWSER makes separate calls to get the image for each of them. Using sprites, the images are combined in one and we can just call for that image using one call.

Consider an example where our APPLICATION requires 3 images as shown below (Without Sprites Section). If we are trying to load the images independently, we require 3 different HTTP Requests to get the data. But if we have CSS Sprites where all 3 images are combines into 1 separated by some spaces, then we require only 1 HTTP Request.

We can access each image from the sprite by accessing the positioning properties as shown in the below code:

In the above code, we are trying to access each element - house, previous and next icon - from the sprite file by using the left, width properties. The image is displayed in the img section by means of the background property. Do note that the source of the image (src attribute of the img tag) is just one file which is the spriteFile.gif and depending on the rules SPECIFIED in the id selectors, the images are loaded ACCORDINGLY.

Both are pseudo-classes (Pseudo-classes are those keywords that specifies the special state of the selected ELEMENT). The nth-child() pseudo-class is used for matching elements based on the number that represents the position of an element based on the siblings. The number is used to match an element on the basis of the element’s position amongst its siblings.

For example, in the below piece of code, if we give nth-child(4) for the example class, then the 4th child of the example class is selected irrespective of the element TYPE. Here, the fourth child of the example class is the div element. The element is selected and a background of black is added to it.

The nth-of-type() pseudo-class is similar to the nth-child but it helps in matching the selector based on a number that represents the position of the element within the elements that are the siblings of its same type. The number can also be given as a FUNCTION or give keywords LIKE odd or even.

For example, in the below piece of code, if we give p:nth-of-type(even) for the example class, then all the even paragraph tags are selected within the example class and the style of background black is applied to them. The selected elements are MARKED in comments in the below code:

We can use the concept of CSS counters. This lets us adjust the appearance of the content based on the location in a document. While using this, we need to FIRST initialize the value of the counter-reset property which is 0 by default. The same property is also used for changing the value to any number that we need. Post initialization, the counter’s value can be incremented or decremented by using the counter-increment property. The name of the counter cannot be CSS KEYWORDS like “none”, “initial”, “INHERIT” etc. If the CSS keywords are used, then the declaration would be ignored.

Consider an example as shown below:

Here, we are trying to achieve auto count increment and display feature for the h2 tag. Wherever we use h2 tag, the content will be prefixed by "Header 1 : " , "Header 2 : ", "Header 3 : " etc.

Margin property using which we can create space around the elements. We can also create space for borders defined at the exteriors. We have the following properties for DEFINING the margin:

• margin-top
• margin-right
• margin-bottom
• margin-left
  margin property by itself has the values as:
• auto – The browser auto-calculates the margin while we use this.
• length – The value of this property can be in px, pt, cm, EM etc. The values can be positive or negative.
• % – We can also give PERCENTAGE value as margin to the element.
• inherit – Using this property, the margin properties can be inherited from the parent elements.

The padding property is used for generating the space around the element’s CONTENT and inside any known border. The padding also has sub-properties like:

• padding-top
• padding-right
• padding-bottom
• padding-left

It is to be noted that the padding does not ALLOW negative values.

From the below image, we can see that the Margin is the outermost entity of the CSS Box Model that lies outside of the borders whereas the padding lies within the borders.

We can add the text-align: center property inside the parent div for aligning the contents horizontally. But it will not align the contents vertically. We can align the CONTENT vertically by making the parent element have relative positioning and the child element have absolute positioning. The child element should have the values of top, bottom, RIGHT, left as 0 to center it in the middle vertically. Then we need to SET the margin as AUTO. It is assumed that both the child and mother ELEMENTS will have height and width values.

Consider we have a div element of height and width taking 20% of the screen size, and we have a paragraph element taking the height of 1.2em and width of 20%. If we want to align the paragraph element at the center (vertically and horizontally), we write the following styles:

The overflow property in CSS is used for specifying whether the content has to be clipped or the scrollbars have to be added to the content area when the content size exceeds the specified container size where the content is enclosed. If the value of overflow is HIDDEN, the content gets clipped post the size of the container thereby making the content invisible. For example,

If the content of the div is very large and exceeds the height of 50px, the content gets clipped post 50px and the rest of the content is not made VISIBLE.

Absolute positioning is a very powerful positioning mechanism that allows users to PLACE any element WHEREVER they want in an exact location. The CSS properties right, left, top, bottom and define the exact locations where you need to place the element. In absolute positioning, the FOLLOWING points need to be considered:

• The element to which the absolute positioning is applied is removed from the normal workflow of the HTML document.
  • The HTML LAYOUT does not create any SPACE for that element in its page layout.
• The element is positioned relative to the closest positioned ancestor. If no such ancestor is present, then the element is placed relative to the initial container block.
• The final position of the element is determined based on values provided to the top, right, left, bottom.

The @SUPPORT in CSS can be very useful to scan if the current browser has support for a certain FEATURE.

&LT;head> <link H ref=" stylel. css" rel=" stylesheet"> <link href="style2.css" rel="stylesheet"></head>

No, the browsers will DOWNLOAD the CSS in the order of its appearance on the HTML PAGE.

TRANSLATE() does not cause the browser to trigger REPAINT and LAYOUT and instead only acts on the compositor. The absolute POSITION triggers the repaint or DOM reflow. So, translate() gives better performance.

Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.

We can implement the progressive rendering of the page by LOADING the lazy loading of the images.  We can use INTERSECTION Observer API to lazy load the image. The API makes it simple to detect when an element enters the viewport and take an action when it does. Once the image enters the viewport, we will start loading the images.

A sample snippet is given below.

A process of determining which CSS rule will be APPLIED to an ELEMENT. It actually determines which rules will TAKE precedence. Inline style usually wins then ID then the class value (or pseudo-class or attribute SELECTOR), the universal selector (*) has no specificity. ID selectors have a higher specificity than attribute selectors.

The style is having the IMPORTANT will have the highest precedence and it OVERRIDES the cascaded PROPERTY.

• It makes every element in the DOCUMENT include the padding and BORDER in the element’s inner dimension for the HEIGHT and width computation.  
• In box-sizing: border-box, The height of an element is now calculated by the content's height + VERTICAL padding + vertical border width.
• The width of an element is now calculated by the content's width + horizontal padding + horizontal border width.

• CSS variables can be used WITHOUT the NEED for a PREPROCESSOR. Currently, all the major BROWSERS support the CSS variables. 
• CSS variable cascade. But the preprocessor variables don’t cascade. 
• CSS variable can be accessed and manipulated in javascript.

Custom PROPERTIES (sometimes referred to as CSS variables or cascading variables) are defined by users that contain specific values to be reused throughout a document. The value is SET using -- notion. And the values are accessed using the VAR() function.

The CSS3 calc() function allows US to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element's width, we can use calc() to specify that the width is the result of the addition of two or more numeric values.

• CSS Grid Layout is a two-dimensional SYSTEM, MEANING it can handle both columns and rows. Grid layout is intended for larger-scale LAYOUTS which aren’t linear in design.
• Flexbox is LARGELY a one-dimensional system (either in a COLUMN or a row). Flexbox layout is most appropriate to the components of an application.

The KEYWORD INITIAL can be USED to reset it to its default value.

Accessibility refers to how software or hardware combinations are designed to MAKE a system accessible to PERSONS with disabilities, such as visual impairment, hearing loss, or limited dexterity.

For example, a WEBSITE developed with accessibility in mind might have text-to-speech capabilities. In the USA public websites have to have accessible COMPLIANCE. It’s defined in 508 compliance. It GIVES the guidelines and best practices for all website users that should be met with key areas of accessibility.

The :ROOT SELECTOR allows you to TARGET the highest-level “parent” element in the DOM, or document tree. It is defined in the CSS Selectors Level 3 specification.

• Using display property(display: NONE). It’s not available for screen readers. The element will not exist in the DOM if display: none is used.
• Using visibility property(visibility: hidden), will take up the space of the element. It will be available to screen reader users. The element will actually be present in the DOM, but not shown on the screen.
• Using POSITION property (position: absolute). MAKE it available outside the screen.

CSS Grid Layout is the most powerful layout system AVAILABLE in CSS. It is said to be a 2-dimensional system, meaning it can handle both COLUMNS and rows, UNLIKE flexbox which is largely a 1-dimensional system.

The FOUR TYPES of @media properties are:

1. All → It’s the DEFAULT PROPERTY. Used for all media-type devices.
2. Screen → Used for computer screen, mobile screen.
3. Print → Used for printers.
4. Speech → Used for screen READERS.

• Centering with Table:

HTML:

CSS:

• Centering with Transform

HTML:

CSS:

• Centering with Flexbox

HTML:

CSS:

• Centering with GRID

HTML:

CSS:

The box-sizing CSS property sets how the total width and height of an element are calculated.

• Content-box: The default width and height values apply to the element's content only. The padding and BORDER are added to the outside of the box.
• Padding-box: Width and height values apply to the element's content and its padding. The border is added to the outside of the box. Currently, only FIREFOX supports the padding-box value.
• Border-box: Width and height values apply to the content, padding, and border.

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document. 

Reflow OCCURS when:

• Insert, REMOVE or UPDATE an element in the DOM.
• Modify content on the page, e.g. the text in an input box.
• Move a DOM element.
• Animate a DOM element.
• Take measurements of an element such as offsetHeight or getComputedStyle.
• Change a CSS style.

• Absolute: To place an element exactly where you want to place it. absolute position is actually set RELATIVE to the element's parent. if no parent is available then the relative place to the page itself (it will default all the way back up to the element).
• Relative: "Relative to itself". Setting position: relative; on an element and no other positioning attributes, it will no effect on its positioning. It allows the use of z-index on the element and it limits the scope of absolutely positioned child ELEMENTS. Any child element will be absolutely positioned within that BLOCK. 
• Fixed: The element is positioned relative to the viewport or the browser window itself. viewport doesn't change if you scroll and hence the fixed element will stay right in the same position. 
• Static: Static default for every single page element. The only reason you would ever set an element to position: static is to forcefully remove some positioning that got applied to an element outside of your control.
• Sticky: Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it CROSSES a SPECIFIED threshold, at which point it is treated as fixed positioned.