Searching for an alternative to the contain: content; CSS property that is compatible with older browsers. Is there a solution out there? Perhaps a CSS hack or workaround?
Searching for an alternative to the contain: content; CSS property that is compatible with older browsers. Is there a solution out there? Perhaps a CSS hack or workaround?
Depending on the context in which you are using contain: content, there may be instances where you can replace it with:
overflow: hidden
This change should work fine because contain: content essentially is a shorthand for contain: layout paint.
In terms of visual outcomes, it is contain: paint that closely resembles the effect achieved by overflow: hidden.
Example in Action:
.outer {
position: relative;
float: left;
margin-right: 12px;
width: 100px;
height: 100px;
background-color: rgb(255, 0, 0);
}
.outer p {
position: absolute;
top: 0;
right: 0;
margin: 3px;
padding: 0;
color: rgb(255, 255, 255);
font-size: 24px;
font-weight: bold;
}
.outer-3 {
contain: content;
}
.outer-4 {
overflow: hidden;
}
.inner {
width: 50px;
height: 50px;
background-color: rgb(255, 255, 0);
}
.inner-2,
.inner-3,
.inner-4 {
margin-top: 75px;
}<div class="outer outer-1">
<p>1</p>
<div class="inner outer-1"></div>
</div>
<div class="outer outer-2">
<p>2</p>
<div class="inner inner-2"></div>
</div>
<div class="outer outer-3">
<p>3</p>
<div class="inner inner-3"></div>
</div>
<div class="outer outer-4">
<p>4</p>
<div class="inner inner-4"></div>
</div>In the scenario provided above:
margin-topmargin-top set to 75pxcontain: content and Inner features a margin-top of 75px overflow: hidden and Inner includes a margin-top of 75pxFor Further Information:
Another option is to incorporate data attributes within your HTML and style them using CSS.
Take a look at this solution:
How to Select Elements by Data Attribute in CSS
After defining a React select component, it looks like this: <FormControl> <InputLabel id="demo-simple-select-label">Age</InputLabel> <Select labelId="demo-simple-select-label" id=&quo ...
I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle. .path { stroke-dasharray: 20; animation: dash 10s linear; } @ ...
I am currently using the Bones theme from Themble, which has a grid system in its design. I attempted to apply this grid system to the header of my website in order to transform menu items into icons on mobile devices and display the full menu on desktop s ...
I am aiming for the search bar to pop up when you type. The code below is functioning, but I am facing an issue where the search bar pops up even when typing in a different input field, such as the comment input. Is it feasible for the search bar not to ...
I have a full-screen background div with the ID #background-change. Within that full-screen background, I have 3 Divs named .fullscreen-column-1, .fullscreen-column-2, etc. My goal is to change the background image of #background-change when the mouseove ...
My HTML page includes the following configured DIV: <div id="contentDiv" style="padding-top: 20px; padding-left: 20px; overflow: auto; height: 100%;" > The content within this DIV is large enough to require a vertical scrollbar. When viewed in IE, ...
Is there a way to eliminate the spacing between Bootstrap columns? I have three columns set up using Bootstrap but no matter what I do, I can't seem to get rid of the space between them. <!doctype html> <html lang="en> <head> ...
Having an outdated WordPress theme from 2010, I wanted to give it a modern touch by adding a sticky header. I found a plugin called myStickymenu that seemed to work well. However, my current theme's header has a fixed width of 960px and I desired to m ...
I developed a To-Do List using Javascript, HTML, and IndexedDB to store the items in the database so that they won't be deleted when the browser is refreshed. I also want to include the date for each item, however, whenever I add an item, the date end ...
I have a challenge where Date 0 represents the start date, Date 1 is the result date after adding a certain number of days (NDays). I am looking for help in JavaScript to calculate Date0 + NDays = Date1. Please assist me as my coding knowledge is quite l ...
Looking to pull out ID numbers and their pass/fail status from an XML file, the data I have is messy and I'm new to Python. Specifically, I have a list of strings with the info and need to extract the codes and status. Currently, I'm struggling w ...
After completing the layout of my website, everything seems to be functioning well. However, I would like to ensure that I haven't overcomplicated it or used poor techniques. The structure involves a main DIV with a nested table DIV, inside of which ...
Creating a 3x3 grid with cells that have varying heights depending on content is proving to be challenging. Except for the cells marked with red arrows, the rest of the grid has fixed height in pixels. I attempted to build a 3x3 grid using divs to experi ...
The CSS: a:focus { opacity: .75 } a:active { transform: translateY(4px) } The purpose: When keyboard users tab to the link, the :focus style serves as a visual indicator Upon pressing the enter key to activate the link, the :active style provides ...
The image is in a h1 editing margin of h1 only edits margin-left increases the margin on the left of the image. trying to increase margin of i element does nothing either on i element does nothing either. <h1 class="display-4"><i class="fas fa- ...
I am currently in the process of creating a single page application with a standard HTML layout as shown below: <html> <head> <title>...</title> <link rel="stylesheet" media="all" type="text/css" href="css/main.css"> ...
How can I make my menu close when clicking on other parts of my website, instead of opening? I know that I should use a click event for this, but when I implemented a click event, my menu encountered 2 unwanted problems: 1- Whenever I clicked on a menu i ...
I am facing an issue with my website footer and its CSS styling. #footer { position: absolute; bottom: 0; width: 100%; height:8rem; } The main goal is to keep the footer at the bottom of the page, regardless of the amount of content on th ...
This is a follow up question from Featherlight hide div on Close After successfully resolving the issue with opening the lightbox, I have encountered another problem. I have added a submit button that should trigger an on('submit', function) whe ...
My website is essentially one large canvas image. Currently, the body fades in when loaded using this code: <body onLoad="document.body.style.opacity='1'"> However, I want to initiate this fade within my paperscript because sometimes the ...