MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack. MERN Stack Interview Part 9 CSS Questions.
Q81. What is file splitting?
A Single CSS file is fine for small projects but for a large projects with multiple layouts and content types it’s smarter to use a modular approach and split your CSS across multiple files.
1. reset.css
2. layouts.css
3. forms.css
4. carousel.css
CSS frameworks such as Foundation and Bootstrap use this approach. Both become quite granular with separate files for progress bars, range inputs, close buttons, and tooltips. This allows developers to include only the components that they need for a project.
Q82. What are the different ways to visually hide content?
Apply this CSS property to an Element to visually hide content: visibility:hidden: The element is still in the flow of the page, and still takes up space.
width: 0; height: 0: Make the element not take up any space on the screen at all.
position: absolute; left: -99999px: Position it outside of the screen.
text-indent: -9999px: This only works on text within the block elements.
Q83. What is UI/UX?
UI or User Interface: Is how a website is laid out and how you interact with it: Where the buttons are, how big the fonts are, and how menus are organized are all elements of UI.
UX or User Experience: Is how you feel about using a website.
Q84. How do you serve your pages for feature-constrained browsers? What techniques do you use?
Graceful Degradation: The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
CSS Feature queries: using @support
Autoprefixer: For automatic vendor prefix insertion.
Progressive Enhancement: The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
Q85. What is Accessibility in a web application?
Accessibility refers to how software or hardware combinations are designed to make a system accessible to persons with disabilities, such as:
1. Visual impairment
2. Hearing loss
3. Limited dexterity
Example: Website with text-to-speech capabilities.
Q86. What is word-wrapping in CSS?
The word-wrap property in CSS is used to break long word and wrap into the next line. It defines whether to break words when the content exceeds the boundaries of its container.
Syntax: word-wrap: normal | break-word initial | inherit;
Q87. How does Calc() work?
The calc() function can be used to perform addition, subtraction, multiplication, and division calculations with numeric property values. Specifically, it can be used with <length>, <frequency>, <angle>, <time>, <number>, or <integer> data types.
.container {
width: calc(100vh - 30px); /* Subtract 30px from 100vh */
}Q88. What is the overflow property in CSS used for?
The CSS overflow property specifies how to handle the content when it overflows its block level container.
Syntax: overflow: visible | hidden scroll | auto | initial | inherit;
Q89. Which CSS property is used for controlling image-scroll?
The background-attachment property in CSS is used to specify the kind of attachment of the background image with respect to its container. It can be set to scroll or remain fixed. It can be applied to all HTML elements.
Syntax: background-attachment: scroll | fixed | local | initial | inherit;
MERN Stack Interview Part 9. MERN Stack Interview MongoDB Express React Node Javascript.
Read Also: MERN Stack Interview Questions & Answer Series Part 8