Comparison between Normalize.css V1 and V2: Balancing support for older and newer browsers

In my project, I am aware that there are two versions of Normalize.css. Version 2 is designed for IE8+, Firefox 4+, Safari 5+, Opera, and Chrome. However, I have decided to use version 1.1.2 instead of 2.1.2 because it needs to be compatible with older browsers like IE7 and ensure cross-browser compatibility. What potential drawbacks might arise from not using version 2.1.2?

Answer №1

There have been a number of modifications to V1 - However, here is an overview of the progression and alterations that led to the development of V2 as well as its finalization. Check it out

You can observe the subtle distinctions and changes. Additionally, the resources shared by Amruth are quite useful - Notably, V2 no longer supports older browsers.

In summary - V2.1.2 offers compatibility with IE 8+, Firefox 4+, Safari 5+, Opera, Chrome. On the other hand, V1.1.2 retains support for legacy browsers (including 'older' ones).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

NativeScript GridLayout not rendering as expected

Issue with NativeScript Screen Layout I have been attempting to design a screen in NativeScript, but I am encountering some complications. Initially, I aimed to replicate the following screen: https://i.sstatic.net/tfa7w.png Despite following the recomm ...

Navbar alignment issue: justify-content-between not functioning properly

The justify-content-between property is not functioning as expected for the navbar. I need the navigation list to expand and cover the entire space with equal spacing between the items. <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-boots ...

What is the best way to establish the starting property state for CSS Animation?

I'm looking to create an animation that involves the following steps: Initial: elementA starts with opacity set at 0; When hovering over containerA, which contains elementA: elementA transitions from position (-5px, 5px) to (0px, 0px); elementA ch ...

Navigation bar collapse items are not properly aligned in the layout

My navbar collapse button is not aligning the items in the dropdown properly. I suspect it has to do with the way I have structured the divs. How can this issue be fixed? <nav class="navbar navbar-expand-md navbar-light mb-4 row"> <b ...

Responsive layout optimization using Bootstrap

I'm struggling with bootstrap responsiveness. I have four items aligned to the right of an image (a title section and 3 items). Currently, it works fine on large screens but on small screens, all the items and the title go down. However, I want to kee ...

Can you utilize CSS alone to divide a list into two vertical columns?

Here is some code that I am working with: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> I am trying to ...

Is there a way to eliminate the return?

Struggling to eliminate the unwanted return in my Wordpress loop. The layout is ruined by trying to display a thumbnail next to the entry: https://i.sstatic.net/j3Ozz.png Even using padding for the entry made it worse! Here's the code snippet that ...

The dynamic links in Knockout.js are unresponsive to clicks

I've been working on a new project that utilizes knockout js. The main issue I'm facing is with setting up a table to display images and information from a form, being stored in an observable array. Each image is wrapped in an anchor tag, and the ...

Permanent header that clicks into place below the primary fixed header

I've been collaborating with fellow developers on this platform to tackle a persistent issue related to a fixed header. Here is the updated fiddle for reference: http://jsfiddle.net/f95sW/ The Challenge 1) As you scroll down the page, the yellow bl ...

Animating path "d" with ReactJS and SVG upon clicking in FireFox

Visit this CodePen for more: https://codepen.io/sadpandas/pen/xxbpKvz const [currentScreen, setCurrentScreen] = React.useState(0); return ( <React.Fragment> <div> <svg className="theSvg" width="156" height="6 ...

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...

Styles in CSS for the first column of a table, with the exception of the first cell in

Here is the HTML code for a table: <table class='census'> <tr> <th colspan="2">My Title</th> </tr> <tr> <td colspan="2" class='chart'><SOME PIE CHART, GENERATED W ...

How come my dimensions are not returning correctly when I use offset().top and scrollTop() inside a scrolling element?

Currently in the process of developing a web app at , I am looking to implement a feature that will fade elements in and out as they enter and leave the visible part of a scrolling parent element. Taking inspiration from myfunkyside's response on this ...

Adjust the size of a textarea once text is removed

When you type text, a textarea expands in size. But what if you want it to dynamically decrease its height when deleting text? $('textarea').on('input', function() { var scrollHeight = parseInt($(this).prop('scrollHeight&apos ...

Mastering @media queries to dynamically alter widths in prop styled components

I have a unique component that utilizes an object with its props for styling. const CustomSection = ({ sectionDescription, }) => { return ( <Text {...sectionDescription} content={intl.formatMessage({ id: &apos ...

CSS: When using the float: right property, the container does not grow to

I'm having trouble with expanding the comment body that is floated to the right, as my container doesn't expand along with it. Any tips on how I can resolve this issue? For a clearer understanding, please refer to this link: http://jsfiddle.net/ ...

When images in Ionic overlap with the side menu bar

Currently, I am in the process of developing an Android app using the IONIC framework. Within this project, I have created three divisions that contain images with shadows applied to them. However, I am encountering an issue where the side menu bar is over ...

Prevent scrolling on both md-sidenav and md-content in AngularJS Material

Currently, I am working on a website using AngularJs Material sidenav. My goal is to make both md-sidenav and md-content appear as one page, without any scroll bars showing up when the height of one element exceeds that of the other. How can I achieve th ...

CSS: border-radius // background-color: white; rounded corners

Having recently delved into the world of HTML/CSS, I am currently working on a fun project to enhance my web development skills. In this project, I have created a search bar and successfully added round corners with border-radius. However, an issue arises ...

Activating Jquery toggle on several elements instead of just the specified element

Hey everyone, I have a question regarding jQuery. I have a toggle function that is supposed to activate when clicking on a specific element - in this case, my logo image with the id of #logobutton. The toggle works great, but there's a problem. The an ...