Creating designs to cater to outdated web browsers, prioritizing backward compatibility

Question

Creating designs to cater to outdated web browsers, prioritizing backward compatibility

I am looking to synchronize my design for older browsers like IE7 and above. I have designed the layout specifically for these browsers, and after researching, I found a tool that uses Javascript to implement the code. Is there an alternative method to achieve this?

Below is my HTML code:

<!DOCTYPE html>
<html lang="en-us">
<head>

    <title>Nitro Data Networks Teleserv Corporation</title>

    <meta name="viewport" content="width=device-width">
    <meta charset="utf-8">

    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>


    <link rel="stylesheet" type="text/css" href="http://nitrodatanetworks.com/assets/main.css"/>
    <link rel="stylesheet" type="text/css" href="http://nitrodatanetworks.com/assets/contact.css"/>
    <script src="http://nitrodatanetworks.com/assets/modernize.js.css"/>" type="text/javascript"></script>


</head>


    <body>
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', '--snip--', '--snip--');
  ga('send', 'pageview');

</script><div id="wrapper">
    <div id="header">
        <ul>
            <a href="http://nitrodatanetworks.com/index.php">   <li>
          <img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/65-32.png">Home</a></li>
               <a href="http://nitrodatanetworks.com/index.php/welcome/login">   <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/91-32.png">Login</a></li>
             <a href="http://nitrodatanetworks.com/index.php/welcome/profile">  <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/88-32.png"> Profile</li>
             <a href="http://nitrodatanetworks.com/index.php/welcome/service">    <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/16-32.png">Services</li>
          <a href="http://nitrodatanetworks.com/index.php/welcome/contact"> <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/04-32.png">Contact us</a></li>
            <div id="social">
            <li>Like Us!<img src="https://cdn1.iconfinder.com/data/icons/social_balloons/48px/social_balloon-14.png"></li>
             <li>Tweet!<img src="https://cdn1.iconfinder.com/data/icons/social_balloons/48px/social_balloon-05.png"></li>
              <li>Plus!<img src="https://cdn1.iconfinder...

My HTML looks like it could use some love.

#dots {
    display: block;
    width: 50%;
}

#button:hover {
    color: purple;
    background-color: silver;
}

javascript html css

Answer 1

Answer №1

It seems like you're attempting to utilize Modernizr. First and foremost, I want to point out that the syntax in your implementation is incorrect. Here is what you currently have:

<script src="http://nitrodatanetworks.com/assets/modernize.js.css"/>" type="text/javascript"></script>

What you should have instead (Note: File extension)

<script src="http://nitrodatanetworks.com/assets/modernize.js" type="text/javascript"></script>

Understanding how Modernizr operates:

Upon page load, Modernizr scans and identifies which "features" are supported by the current browser. It then adds specific class names to the html tag of the page. For instance, if you are utilizing CSS Gradients and open the page on an outdated browser lacking support for it, the html tag will appear like this

<html class="no-cssgradients">

.

You now have the ability to define rules targeting situations where CSS Gradients are not available.

For example, here's your default class (excluding vendor prefixes)

.exampleclass {
 background: linear-gradient(to bottom, #4c4c4c 0%, #000000 0%, #000000 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
}

As a fallback, you can use the no-cssgradients class. This means that when CSS Gradients are unsupported, this class will apply to your element.

.no-cssgradients .exampleclass {
 background: #000000;
}

While the fallback property can be included within the default tag, I separated them here for demonstration purposes. The same approach can be applied to other unsupported elements identified by Modernizr. There are more functionalities offered by Modernizr beyond just classes, so I suggest exploring their website for further information.

Edit: I also recommend validating your HTML & CSS code to address the syntax errors present throughout. Best of luck!

Answer 2

It seems like you're attempting to utilize Modernizr. First and foremost, I want to point out that the syntax in your implementation is incorrect. Here is what you currently have:

<script src="http://nitrodatanetworks.com/assets/modernize.js.css"/>" type="text/javascript"></script>

What you should have instead (Note: File extension)

<script src="http://nitrodatanetworks.com/assets/modernize.js" type="text/javascript"></script>

Understanding how Modernizr operates:

Upon page load, Modernizr scans and identifies which "features" are supported by the current browser. It then adds specific class names to the html tag of the page. For instance, if you are utilizing CSS Gradients and open the page on an outdated browser lacking support for it, the html tag will appear like this

<html class="no-cssgradients">

.

You now have the ability to define rules targeting situations where CSS Gradients are not available.

For example, here's your default class (excluding vendor prefixes)

.exampleclass {
 background: linear-gradient(to bottom, #4c4c4c 0%, #000000 0%, #000000 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
}

As a fallback, you can use the no-cssgradients class. This means that when CSS Gradients are unsupported, this class will apply to your element.

.no-cssgradients .exampleclass {
 background: #000000;
}

While the fallback property can be included within the default tag, I separated them here for demonstration purposes. The same approach can be applied to other unsupported elements identified by Modernizr. There are more functionalities offered by Modernizr beyond just classes, so I suggest exploring their website for further information.

Edit: I also recommend validating your HTML & CSS code to address the syntax errors present throughout. Best of luck!

Creating designs to cater to outdated web browsers, prioritizing backward compatibility

Answer №1

Similar questions

Is there a way to determine if the cursor is currently focused on an input field, textarea, or select dropdown

combining the use of $.ajax

Tips for designing custom dropdown menus within the WordPress menu editor

"Adding page-specific scripts with the help of nunjucks and express app: A step-by-step guide

Assurance of retrieving information

AngularJS parent selector nearest to the element

The transparent DIV/waiting message may not be displayed in IE10

Execute a function every 10 seconds after it finishes running (JavaScript)

Checking authorization with CognitoUser solely for "code" provided by CognitoUser (npm: amazon-cognito-identity-js)

The functionality of the disabled and checked options on the radio button seems to be malfunction

Troubleshoot: Difficulty with accessing nested tag name using getElementsByTagName

`In AngularJS, the same URL ('/') can display different templates depending on the user's login status.`

The ReactJS code encountered an error when attempting to access the 'location' property of an undefined or null reference

XSLT: Tips for preventing the use of self-closing tags within HTML attributes

Creating a post request in Express.JS with an empty object

Does the PHP include function act as an HTTP request?

Reducer is unaware of my current state within react redux

Having trouble scrolling to the top in Flickr Search using AngularJS, the results are restricting my movement

center text within grandparent element

Angular 6 issue: Bootstrap 4 carousel indicators not responsive to clicks