How to Use Conditional In-Line CSS for Internet Explorer and Other Browsers

After inspecting the source code for this website, I noticed a cool feature where the page changes based on your scrolling position. It creates a visually appealing effect.

Upon further examination of the source in FireFox, I observed the use of 

-webkit-transform:matrix(a, b, c, d, 0, 0);
to manage the movement of the div elements. However, when viewed in IE, it only shows as 
transform: matrix(a, b, c, d, 0, 0);
. These styles are defined in-line like this:

FireFox:

<div class="card gift" style="z-index: 0; -webkit-transform: matrix(a, b, c, d, 0, 0); right: 198px; top: 323px; opacity: 1;"></div>

IE:

<div class="card gift" style="z-index: 0; transform: matrix(a, b, c, d, 0, 0); right: 198px; top: 323px; opacity: 1;"></div>

In these examples, the variables a, b, c, and d change dynamically based on scroll position.

I stumbled upon this post on SO about conditional CSS, but it doesn't address in-line styles such as those seen in the code above.

Is it even possible to have conditional CSS properties applied inline? I attempted something like this (check out the fiddle here):

<div class="testing" style="<!--[if IE]>background-color: #321;<!--[if !IE]> -->background-color: #F00;<!-- <![endif]-->"></div>

If inline conditional CSS is not feasible, then how do websites adjust inline styles based on browsers? My assumption is that JavaScript is used to modify properties after the page loads, depending on the scroll position.

Thank you.

EDIT:

Upon reviewing the link provided, they have included

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-i10 ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->

at the beginning of their webpage, which bears striking resemblance to one of the responses in the SO link I shared earlier. However, I am unclear on the functionality of these lines of code. Could this be part of the solution?

Thanks once more.

javascriptjqueryhtmlcssinternet-explorer

Answer №1

It's not possible to use Conditional-CSS inline, the answer is a firm NO.

However, if you need to target specific browsers with different CSS styles, there are some CSS hacks that can help:

Css Hacks

Browser specific CSS-Hacks

Answer №2

Conditionals in HTML, not in CSS. It seems impossible to have inline conditionals as you demonstrated.

The use of HTML directs users to specific style sheets for handling the IE browser, as it is the only browser that supports these conditional statements.

It is likely that there is a script detecting the browser and dynamically updating the code as necessary.

Answer №3

Inline conditional CSS is a unique concept that can only be achieved using JavaScript, as browsers like IE9 only support conditional statements for formatting. This approach adds versatility and functionality to web design.

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

When working with express.js, the following error may occur: Uncaught Error [ERR_HTTP_HEADERS_SENT]: Unable to modify headers after they have been sent to the client

Seeking assistance for resolving this issue. The purpose of this code is: Update the artist using the specified artist ID and data from the request body, then save it to the database. Return a 200 response with the updated artist in the response body. If ...

javascriptnode.jssqliteexpressroutes

What is the best way to distinguish between inline javascript and dynamically created content in Express/Node.js?

I've encountered a bit of a noob-question despite having a few years of experience in web development. Despite searching Programmer Stack Exchange and Google, I haven't found an answer, so here goes. Currently, I'm working with the Express ...

javascriptnode.jsrefactoringexpresspug

Ways to incorporate a conditional statement within a dropdown menu

When a user interacts with a dropdown, I want to conditionally show different choices based on their selection. If the user clicks on a checkbox, a specific set of options will appear; if they click on a radio button, another set of options will appear. h ...

javascriptjqueryhtml

Postponing the findings of a database for a quarter of an hour

Hey there, I'm a new coder and like to dabble in a bit of everything, so go easy on me! So, here's the deal: data from a poker tournament is constantly being updated in a database, but we're delaying the video feed by 20-25 minutes to preve ...

javascriptphpmysqlajax

Utilizing Google Maps and transferring variables between PHP pages without including the specific page involved

I am currently working on implementing PHP/MySQL with Google Maps following the example provided in the tutorial: https://developers.google.com/maps/articles/phpsqlajax_v3 While I understand that this topic has been extensively covered, I have encountered ...

phpjqueryajaxgoogle-mapsvariables

Can you explain the function of a digest attribute?

As a beginner in the world of NextJS, I am currently working on getting my first project ready for production. However, I encountered the following error: Application error: a client-side exception has occurred (see the browser console for more information ...

javascriptreactjsnext.jshash

What is the best approach for managing the popstate event when the URL no longer exists?

When working with html5 popstate, I have two specific goals in mind. Instead of relying on plugins, I am utilizing these two methods: Push State: function contentLoaded(...) { ... window.history.pushState({ pageUrl: url }, url, url); ... } Po ...

htmlpushstatepopstate

Indicate the node middleware without relying on the port number

My website is hosted at mywebsite.com and I am using node and express for middleware services, pointing to mysite.com:3011/api. The website is hosted statically on Ubuntu 16 (Linux) and the middleware is run separately using pm2 (node server). I want to b ...

javascriptnode.jsexpress

Transfer information between two devices remotely through AJAX

I am in the process of developing a web application that utilizes a mobile phone as a controller, similar to this example: . The concept is quite simple - I just need to transfer text entered on the phone to the computer. There is no need for a database, ...

javascriptphpjqueryajaxjson

Unusual behavior exhibited by dynamic code in iframe

When trying to retrieve a dynamic height iframe, I implement the code below. In the <head> area <script language="javascript" type="text/javascript"> function adjustIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight ...

javascriptjqueryhtmlcssiframe

When sending multiple JSON objects in an HTTP POST request to an ASP.NET MVC controller action, they may not be properly bound

I am passing two JSON objects to an ASP.NET MVC controller action, but both parameters are showing as null. Can anyone identify the error, possibly related to incorrect naming? /* Source Unit */ var sourceParent = sourceNode.getParent(); var sourceUnitPa ...

javascriptjsonasp.net-mvc-4model-binding

Troubleshooting Issue: ASP.NET UpdatePanel Not Responding to jQuery

I am having difficulties invoking jQuery functions within an "asp:UpdatePanel". Despite the code provided below, my attempts to add a class to the div element ".popup-body" are unsuccessful. Interestingly, the "alert();" function works without any issues. ...

javascriptjqueryhtmlasp.net

Styles and CSS have been successfully loaded, however, the content is not appearing

After attempting to import a web HTML CSS template into my self-made MVC, I encountered an issue. While the template works properly on its own, it fails to connect to the CSS files and display proper styles when accessed through my controller. Instead, onl ...

phphtmlcssimport

What steps are required to insert additional tags into select2?

I've successfully retrieved the tags from my API, but I'm facing an issue with adding new tags. Here's the code snippet I've been using: $(function(){ var user_email = localStorage.getItem('email'); var api = ...

javascriptjqueryajaxjquery-select2

Issue with VueJS components not functioning as expected with routes

I've encountered an issue when using the component tag with an id of #app within the template of my components/App.vue file. Whenever I include this setup, I receive the following errors: // components/App.vue <template> <div id="app"> ...

javascripthtmlvue.jsvue-router

How to perfectly align columns using Bootstrap

Looking to create two fixed columns in Bootstrap. The current layout can be seen in the image below: https://i.sstatic.net/w41sD.png I want the left and right column to align at the top regardless of the number of items in each column. Refer to the image ...

htmltwitter-bootstrapcss

React code to automatically scroll to the top of the page when the user clicks the

Whenever the URL changes or the page is reloaded in my project, I need it to scroll back to the top. While most scenarios work fine, I'm encountering an issue with the browser's back button. Despite a change in the pathname, the page fails to scr ...

javascriptreactjsreact-router-dom

The selector-triggered JQuery event being invoked by my script

Facing an issue while trying to invoke my jQuery event. I am working with 2 jQuery events: $element.on('click', function (e) { ... }); $element.on('click', '.toggle', function (e) { ... }); My question is how can I trigge ...

javascriptjquery

Verify the presence of a username using the bvalidator, a jQuery validation plugin

Currently, I am using bvalidator, a jQuery validation plugin, to verify if a username exists in the database. The documentation provides an example that I tried implementing, but I am struggling to understand its functionality. For more details on this exa ...

phpjqueryajaxvalidation

Error occurs in IE6 when trying to remove the "selected" attribute using the removeAttr()

When working with two listboxes where items are moved from the first to the second, how can I prevent selection in the second listbox once an item is added? This is the code snippet I used: $("#<%=lbCommcatTo.ClientID%> option").removeAttr("selecte ...

jqueryinternet-explorerselection