SASS mixin that enables flexbox capabilities without supporting older, legacy versions of flexbox

Is it possible to provide support for browsers lacking flexbox compatibility (such as IE) while using SASS mixins?

I have been quickly implementing the display:flex property with the following mixin. However, I am facing challenges with IE and need to manually change classes to display:table and display:table-cell by utilizing Modernizr, as not all browsers fully support display:flex.

@mixin flexbox() {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
}

Is there a way to refactor my mixin based on whether it is within a body element containing the class of flexboxlegacy or no-flexboxlegacy?

cssinternet-explorersassflexbox

Answer №1

@mixin flexbox() {
  display: flex;

  .no-flexboxlegacy & {
    display: table;
  }
}

x y z {
  @include flexbox();
}

Converted to:

x y z {
  display: flex;
}

.no-flexboxlegacy x y z {
  display: table;
}

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

Tips for updating the color of a table row when it is chosen and a row is inserted using ajax

I have successfully added table rows dynamically through ajax in MVC C#. Now, I am looking to change the color of a selected row. This effect works well on the table with rows generated in the HTML view. <div class="col-lg-6 col-sm-12"> ...

c#jquerycssajaxasp.net-mvc

What is the best way to create a seamless transition for background-image animations

I have a div where I am applying a class that alters the background image: $('div').addClass('specialBackground'); However, the transition between the background images is too abrupt. I want to achieve a smooth fade effect between the ...

jquerycssbackground-image

"Client-side style not rendering correctly in Internet Explorer 8 when accessed through server in

I have noticed some strange behavior with my .net application. Everything appears fine when running it from Visual Studio on IE8: However, once I deploy the application to my server and access it via URL, it seems to lose its margin: It's puzzling t ...

html.netcssinternet-explorerinternet-explorer-8

IonTabButton not responding to onClick events

Currently, I am utilizing the Ionic 5 CSS library in combination with React. I found that IonTabButtons have a more appealing style compared to IonButtons because IonTabButton allows for text below the Icon. In the screenshot provided, all icons are displ ...

cssreactjsionic-frameworkionic5ionic-react

How to incorporate Django syntax into CSS styling

Imagine a scenario where a Django site is equipped with numerous stylesheets. CSS and JS files are located in the static/ directory within an app's folder or in the global site directory. Various color themes are employed across different pages, neces ...

pythondjangocss

The collapsible navbar vanished, where did it go?

While experimenting with the carousel template page, I noticed that the NavBar collapses when the screen width is reduced below a certain pixel size. Initially, everything was working fine as intended. However, after making some modifications to the carou ...

htmlcsstwitter-bootstrap

Arranging the placement of an arrow within an HTML dropdown menu

I'm struggling with positioning my custom arrow in select elements. Each select has a different width, and I need to ensure that the distance from the right edge of the select to the arrow is consistent across all of them. Currently, I am using backg ...

htmlcss

Centered horizontally are images that have been floated

How can I align images with different widths when they are all floated right? I want them to be aligned vertically below each other. For the best display, please view in fullscreen on your computer as the example window is small. .compressor{ height: 1 ...

htmlcsscss-float

Selenium 4.1.3/IEDriverServer 4.0.0 is encountering a SessionNotCreatedException due to the absence of an open desktop session, whereas it was working fine with Selenium 3.141.0/IEDriverServer 2

My Selenium automation setup involves a Jenkins Maven job that runs on a separate Jenkins agent without an open remote desktop session. When using Selenium 3.141.0 with IEDriverServer 2.53.1.0, everything works smoothly. However, upgrading to Selenium 4.1. ...

javaseleniumjenkinsinternet-explorerselenium-iedriver

Styling conditionally with Dash Bootstrap using an IF statement

I am looking to implement a feature where text in a column is displayed in two different colors based on its value, using Dash bootstrap and various HTML components. For example, consider the following table: Value Yes No Yes Yes No The goal is to displa ...

pythonhtmlcssbootstrap-5

While it includes a new section, it fails to refresh the navbar

Upon clicking the button to add a new section, the section gets added successfully. However, the navbar does not get updated as expected. It should dynamically update the navbar to display both the existing sections and the new section added using JavaScri ...

javascripthtmlcssarraysdynamic

Create custom buttons in Material-UI to replace default buttons in a React modal window

How can I prevent overlay on material-ui's RaisedButton? When I open a modal window, the buttons still remain visible. Which property should be added to the buttons to disable the overlay? Any assistance from those familiar with material-ui would b ...

cssreactjsmaterial-ui

Concealing the submit button until a file has been selected

How can I make the submit button invisible until a file is selected? <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="imageURL[]" id="imageURL" /> <input type="submit" value="submi ...

javascriptjqueryhtmlcss

What is the most effective way to incorporate animated hyperlinks?

I've been grappling with a webpage I'm designing, featuring sentences acting as links arranged in inline-block format. My goal is to create an animated effect that resembles twinkling stars, pausing the animation on hover. It feels like I'm ...

jquerycssanimation

Bootstrap navbar and its underlying area

I am struggling to effectively implement a navbar on my website. I currently have the following code snippet in the body section of my base.html file. (Should the navbar be placed in the head section instead?) <body> <div class="row" ...

htmlcsstwitter-bootstrap

The navigation bar seems to be missing from the page

I am currently working on developing a responsive navigation bar with CSS animation. However, I am encountering some issues when trying to run the code on my laptop. Upon running it, only the checkbox appears while the list of navigation items is displayed ...

htmlcssnavbar

element obscured by overlapping elements

I'm unsure why this issue is occurring; it seems to be a CSS error, but I can't pinpoint the exact location. Working on this in Rails, so I'm relatively new to it, but it should follow standard CSS practices! The "ticket" element appears t ...

htmlcss

IE6/7 dilemma with CSS floating

Encountering a strange CSS float issue in IE6 and IE7. The HTML code looks like this: <fieldset style="float:left"> <legend>Summary</legend> <div class="display-label">Recruitment type</div> <div class="displa ...

cssinternet-explorer-7css-floatinternet-explorer-6

Ways in which elements can be toggled through jquery or javascript?

There are various words listed below: word1 word2 word3 ... Every word in the list is linked to 1 to 3 examples. When a user clicks on a word, certain actions should take place. I want the examples to display when the associated word (e.g., word1) is c ...

javascriptjqueryhtmlcss

"Troubleshooting: Why isn't my Tailwindcss box shadow

I'm currently incorporating Tailwindcss into a React project to recreate the Star Wars website mobile menu. However, I am facing an issue where the box shadow added to the hamburger icon segments is not visible when the navigation drawer is opened. A ...

cssreactjsjsxtailwind-css