Is it possible to utilize a CSS variable to store a font for cases where the user may not have the specified font installed?
For example:
:root {
--common-font: Comic Sans MS;
}
.header1 {
font-family: CoolFont1, var(--common-font);
}
Would older browsers experience issues if I include a reference to the variable in the font names?
Avoiding the usage of CSS variables is essential when it comes to ensuring compatibility with legacy browsers. In such cases, it is recommended to utilize a fallback font.
One way to achieve this is by incorporating the following code:
.header {
font-family: sans-serif; /* Fallback font for outdated browsers */
font-family: var(--common-font);
}
Additionally, you can implement an @supports condition along with a dummy feature query as demonstrated below:
.header {
@supports ( (--a: 0)) {
/* Supported */
font-family: var(--common-font);
}
@supports ( not (--a: 0)) {
/* Not supported */
font-family: sans-serif; /* Fallback font for outdated browsers */
}
}
It is true, the CSS variable feature may break in legacy browsers. But fear not, there is a solution! You can utilize the postcss-css-variables plugin to handle the conversion for you. This way, you can continue to use CSS variables without worrying about compatibility issues with older browsers. Once those legacy browsers are no longer relevant, simply remove the plugin.
For more information, check out the details at https://www.npmjs.com/package/postcss-css-variables.
There is even a playground available where you can experiment and see how it works firsthand.
For instance,
:root {
--color-background: #ffaaaa;
--font-color: #2222ff;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: #aaaaff;
--font-color: #ffFF22;
}
}
body {
background-color: var(--color-background);
}
p {
color: var(--font-color);
}
will be transformed into
body {
background-color: #ffaaaa;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #aaaaff;
}
}
p {
color: #2222ff;
}
@media (prefers-color-scheme: dark) {
p {
color: #ffFF22;
}
}
I am having trouble aligning my text to the right: #login_status { font-size: 1.2em; text-align: right; display: block; float:right; } Here are the relevant CSS styles: #logo { ...
For a course project, I am recreating a grocery store website and need assistance on how to retain the shopping cart values even after refreshing the webpage. Please inform me if more information is required... <button type="button" id= ...
Utilizing Jquery's .html() method, I am extracting the HTML of my current page in the following manner. <h:outputScript name="js/jquery-1.7.2.js" /> <h:outputScript> function fetchHtml(){ $('#next').click(function(){ ...
I am attempting to extract a value from an input textbox during the initial rendering process using useRef, but I am encountering the following error: " ref is not a prop. Trying to access it will result in undefined being returned. If you need to ac ...
I typically refrain from discussing topics that I'm not well-versed in (my weak spot has always been working with time and dates in javascript), but I find myself in urgent need of assistance. I've decided to use this link to showcase a countdow ...
Looking to stack two divs on top of each other within a parent div to create a tab system for an applet. The challenge is that the parent div has auto height and the exact height of the child divs is unknown. Absolute positioning allows me to stack the div ...
I'm attempting to extract the value from the following HTML source code: K<sub>C</sub> [ksi√in]:<br> <input class="test1" type="text" name="fKC" value=""> <br> However, the code I tried using does not seem to ...
I'm new to PHP and I'm attempting to display user information in a div after submission using the echo function. Here is my current code snippet: <label class="input-fields" name="cust-name"> Name <input type="text" id="cust[name]" ...
My friend is working on a website and he's using a plugin called Flip Lightbox. The basic functionality of the plugin is that when you click on an image, it flips over and pops out as a lightbox. Everything works fine, however, if you scroll down the ...
My homepage is fully loading, but the slideshow feature is not functioning correctly. I have a file called slide.js in my /lib directory that I am trying to integrate into my homepage. The images are referenced properly and working, but they are not displa ...
I am struggling with styling a menu that has a structure like this: <div class="myclass" > <ul> <li> <li> <------- need to style the parent li and not the child li <li> <ul ...
I'm encountering a Cross Site Scripting error when using the code below. Javascript function resizeIframe(ifRef) { var ifDoc; //alert(ifRef); try { i ...
Is there a way to create a search bar similar to those seen on popular websites like YouTube, where the search results overlay the rest of the page without displacing any content? I've searched extensively on Google and YouTube for tutorials on databa ...
Currently, I am facing a challenge while developing a website. Specifically, I am struggling with resolving the issue of a blank page being displayed. The website that I am working on involves functionality where swiping right triggers data insertion into ...
I am facing an issue with the JSON format. Being new to this, I am struggling to identify the root of the problem. In my Google App Script, I have a doGet function that looks like this: function doGet() { var htmlTemplate = HtmlService.createTemplateF ...
Encountering an issue with the PrimeNG tree in angular2 Let's take a look at the code snippet from product_tree.component.ts : constructor(private http: HttpClient, private productsService: ProductsService) { this.productsService.getProductsClasse ...
Is there a way to save an Html5 canvas element as an image file using Javascript? I've tried using the CanvasToImage library, but it doesn't seem to work for this purpose. You can view my current code on JsFiddle. <div id="canvas_container" ...
I am trying to find a way to preview multiple images uploaded from different inputs. When the button is pressed, the content from a textarea containing <img src="$img" id="img1"> is written inside a div called seeimg. The IDs for these images range f ...
While working on a HTML5 drag and drop image uploading feature, everything was going smoothly. I had a small div in the HTML with a JavaScript event handler set up like this: $('#uploader').on('dragover', function(e){ ... }).on(&apos ...
Many discussions focus on comparing games with high levels of interaction, but my project involves a web application that manipulates objects individually. These objects can be images or text, and they can be replaced, resized, rotated, zoomed in, and dele ...