I'm struggling to understand how fallbacks function in CSS specifically for vh and vw units. Can anyone shed light on this topic?
My attempted solution does not seem to be working as expected, with the height property always taking precedence.
This is the CSS code I have tried:
-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* Fallback */
Upon reviewing your initial code snippet, there are a couple of observations to be made:
-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* Used as a fallback */
The prefixes, such as -webkit-, are only valid if they correspond to a specific property. In the case of height, these prefixed properties are unnecessary and will be disregarded by browsers.
(Pro Tip: For a comprehensive list of CSS properties, you can refer to resources like MDN)
To address this issue effectively, we can leverage the behavior where browsers skip over unrecognized properties or values. Therefore, consider implementing the following adjustment:
height: 41px;
height: 5.2vh;
When encountering height: 41px, the browser interprets it as intended. Subsequently, when presented with height: 5.2vh, the browser either utilizes the vh unit if supported, similar to how it would process color: blue; color: red;. Conversely, if the vh unit is not recognized, it is simply ignored. By establishing the fallback initially, any disregard for the vh unit does not impact functionality.
Clearer now?
It's essential to prioritize your fallback value above all other values. In case the overriding values fail to render properly on a browser, the initial value will be utilized.
width: 29px; /* This serves as the fallback */
width: 3.8vw;
The attributes -moz-height, -webkit-height, -o-height, and -ms-height are not considered valid extension properties as they are not specified by any of the UA implementations.
The reason why you see height: 41px as the final value is because -webkit-height (in Chrome or Safari) is not recognized, but height: 41px is.
To ensure proper rendering, use the following code:
height: 41px;
height: 5.2vh;
In this scenario, browsers will prioritize the first declaration height: 41px, followed by height: 52.vh if it is acknowledged. If neither are recognized, the fallback last "good" value will be 41px.
It's worth noting that 1vh is equivalent to approximately 4.8px, so when considering height: 33.28px, keep that in mind. The previous responses have also provided valuable information.
Is there a way for me to apply dynamic styling based on the result within my div? I have created a function that calculates a total number and updates the data property to display either 'Low' or 'Good' depending on the count. I have ...
Can you achieve a background color effect using Stylus without any text? span { width: 5px; height: 5px; } span.red { background-color: #f00; } <span class="red"></span> ...
As a newcomer to designing HTML forms, I am looking to create a simple input-group where the width of the text boxes is different. Specifically, I want the surname textbox to be shorter and the FullName textbox to be longer. Can anyone provide guidance on ...
Is there a way to replicate the hover effect seen on the images of this page - ? When you hover over an image, a larger picture appears within a bordered window. Any suggestions on how to achieve this effect would be greatly appreciated! ...
I'm currently honing my CSS skills by following a Youtube tutorial from freecodecamp.org Here's the code I've been working on: p::before{ content: "hello "; color: white; font-size: 60px; background: salmon; margin-bottom: 20px ...
I discovered an interesting background image embedded in a CSS file. Is there a way for me to actually view it? "iVBOR..." to "5CYII=" and saved it in a file named image.png - unfortunately, this method did not yield the desired outcome.</p> ...
I recently helped create a website for my friend at Unfortunately, the logos underneath (see pictures) are not showing up centered. Additionally, when viewing the site on a mobile device, everything looks off. Can anyone provide assistance with this issue ...
I have a bootstrap 4 navigation bar with a font awesome icon-shopping cart that I want to keep near the menu bar instead of toggling into the default responsive navbar. How can I achieve this? HTML: <nav class="navbar navbar-expand-lg navbar-dark bg-d ...
I am attempting to create a specific shape using clip-path: polygon, but I am struggling to understand the documentation. The properties for this shape are unclear to me - what do the values represent in clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) ...
I recently implemented an accordion feature on my website located at . You'll notice that there are two accordion fields named "DONE-FOR-YOU WEBSITE" and "WEEKEND WEBSITE WARRIOR". When you click on these fields, their respective panels open up as int ...
I am attempting to create a toggle effect for an SVG icon, rotating it from the up position to the down position when clicked. While a pure CSS solution would be ideal, I am struggling to implement it for an SVG icon. Unfortunately, I cannot use a font ic ...
Having trouble with the twitter bootstrap scroll spy feature as the navigation doesn't update until midway through scrolling and skips item 4 to reach the last item. Check out this example: http://jsfiddle.net/eoboite/kjvAa/38/ What am I doing wrong? ...
When using ellipsis in a text input to indicate overflow, is there a way to determine what text is visible to the user versus hidden behind the ellipsis? Thank you for any help! https://i.stack.imgur.com/8iLBQ.png In my scenario, I need to display a list ...
I am working with this JavaScript code snippet: <script> $('.tile').on('click', function () { $(".tile").addClass("flipOutX"); setTimeout(function(){ $(".tile-group.main").css({ marginLeft:"-40px", widt ...
After adding the Zopim widget code to the head section of my website, I found that it consistently loads with a black color theme, ignoring any color settings I try to apply. I've attempted to adjust the styles using CSS and Javascript, but so far not ...
Hey there! So, I've been trying to fix the wonky drop-down menu on my website, but everything I've attempted so far hasn't worked. I've tinkered with float, margin, and a bunch of other CSS techniques, but no luck. Someone suggested usi ...
As a beginner in coding, I am taking on the challenge of creating a webpage for a student project using React. I've hit a hurdle while working on the navbar for the page. How can I align the items (Home, Project, Team, Contact) to the right side of t ...
I'm having trouble centering a row with 4 columns. It seems off when I look at the picture below, specifically at the vertical border under the "most read" blue square. html file: <div class="block-section"> <div class="sm-section-wrapper" ...
Currently facing a perplexing issue while developing a website using aspx.net and c#. The following code snippet is on my masterpage: protected void Page_Load(object sender, EventArgs e) { if (HttpContext.Current.Request.Url.AbsolutePath == "/ ...
I'm currently attempting to design a sophisticated clip-path using a logo in CSS, but I keep receiving an error stating "Invalid Property Value." The X and Y coordinates have been computed based on dimensions of 508px x 190px https://i.sstatic.net/Yh ...