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
I have been tasked with developing an MVC C# application where the contents of a div are dynamically created using an AJAX call to fetch data from a database. Upon successful retrieval, the content is then displayed as a success message in JavaScript. Here ...
I'm facing difficulties in detecting the length and index of the dynamically appended div. I have researched extensively and found a solution involving MutationObservers, but I am unsure if it is necessary for this particular issue. Let's focus ...
In the web page, there is a button labeled [Add Field] which, when clicked, reveals a drop-down menu. The xpath for this drop-down menu is: '//*[@id="adv_options[3][]' The second array item is empty as shown here: '[]'. I have manag ...
Fiddle. I am in the process of developing a chat/mail application with a resizable menu similar to the Google Hangouts desktop app. When resizing the brown content pane at a normal speed, you can observe that the boundaries are functioning as intended. My ...
Here is a section that I have created, you can view the mockup here. The section is divided into 3 parts, each taking up around 33.3% of the width and floated. My goal is to make it so that when a specific element, like .col-one in my example, is hovered ...
I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...
My webpage features a web form using Flask where users manually input their information that is then added to a table upon submitting. The current setup involves an autoplay video prompting users with questions, which they answer manually and then submit t ...
I am dealing with a situation where I have a div named "Main_Card" containing text and an icon. When the icon is clicked, it moves the "Main_Card" along with everything inside of it. The challenge arises when I need to set the icon's position as eithe ...
Although I am relatively new to PHP, I have successfully developed a membership framework for my website that is fully functional. However, before diving into the design phase, there is one particular thing I am keen on achieving but unsure of how to go ab ...
I want to display IconButtons alongside plain text in a single block of text, but the result didn't turn out as I had hoped. Here is what I attempted: JS(ReactJS): <div> <span> <h3>Title</h3> <IconButton className ...
I am exploring the realm of Event tracking with Google Analytics. To make this happen, I know that I must include an onclick attribute to select links (those specifically requested for tracking) in the following manner: <a href="http://www.example.com" ...
Currently, I am developing a billing application using Sails.js, Angular, and ejs. Everything is going smoothly, but now I have a pressing need to save the HTML invoice as a PDF. After hours of searching on npmjs, I came across the html-pdf package. It wa ...
Check out the sample code here: http://jsfiddle.net/YUhgb/ HTML Markup <html> <body> <div class="left"></div> <div class="right"> <div class="container"> <div class="i ...
When we scroll down the page, the next section should automatically bring us back to the top of the page without having to use the mouse wheel. .bg1 { background-color: #C5876F; height: 1000px; } .bg2 { background-color: #7882BB; height: 1000px; } .bg3 ...
Here is some HTML code for displaying card information: <div class="col-md-4" *ngFor="let card of allCards"> <p class="card-text">Card Color: {{card.color}}</p> <button type="button" class=" ...
I am currently working on validating multiple fields within a form. Although I lack experience in JavaScript, I have managed to piece together a code that is functional for the most part. If all fields are left blank, error messages prompt correctly. Howe ...
Looking to decrease the font size of the latest post's title and keep it centered on my Jekyll based blog. I attempted to adjust https://github.com/x0v/x0v.github.io/blob/master/_sass/atoms/_feature-title.scss by adding font-size: 45px !important; f ...
I designed a basic html page and utilized jquery/ajax to transmit a simple json file to my php server. The behavior of my code is quite puzzling. Initially, I followed suggestions from other Stack Overflow queries: Script1 var data = {"deviceUUID":"ab ...
My cards need some styling adjustments - specifically, I want the first and third card in each row to have a top margin of 50px. Strangely, this doesn't seem to work with Bootstrap, but it does with pure CSS. Is there a specific class in Bootstrap tha ...
I've been working on updating the values of initUsers on the DOM. The initial state values work fine, but when I try to update initUsers, it displays different values than expected. Essentially, entriesNum receives a number as an event and changes th ...