Related
I got this as close to a true SSCCE as I could while still replicating the issue:
<!DOCTYPE html>
<html class="colored-bg">
<head>
<title>Firefox CSS Priority Test</title>
<link rel="stylesheet" id="_switchSheetBackup" href="//Shared.BHStudios.org/_css/visual_Clean_Blue.css"/>
<link rel="stylesheet" id="_switchSheet" href="//Shared.BHStudios.org/_css/visual_Clean_Purple.php"/>
</head>
<body>
This page should have a purple background, not a blue one.
<br/>
This should have purple text.
</body>
</html>
Live Example
As you can see, the first stylesheet is a backup in case the second stylesheet doesn't load or takes awhile to load (This is my way if implementing minimal-JS site theming, so when a style is changed, the user doesn't see a noticeable flicker). The intended result is that the page is purple if all stylesheets load properly.
This works great in Chrome and Edge browsers, but not in Firefox. The weird thing is that it's just the background coloring; other classes like inverse button (which makes a white button with colored text) work as intended! Is there a quirk or unsupported feature in Firefox that causes this? Most importantly, How do I fix this?
Also, I tried minimizing the code further but couldn't replicate this weird behavior.
The rule on line 33 of visual_Clean_Purple.php is breaking the CSS in Firefox. Try removing:
*::selection,
BoltClock offers a good explanation in this answer:
Firefox appears to simply not understand ::selection (hence
necessitating the vendor-prefixed ::-moz-selection), so it ignores the
entire rule on encountering an unrecognized selector per the spec.
The common workaround for a browser not understanding one or more
selectors in a group is to split/duplicate the rule set.
...
In fact, in this case it's the only thing you can do, i.e. you will
have to put up with this slight bit of bloat.
You are using a CSS selector that Firefox doesn't yet support (*::selection) in visual_Clean_Purple.php which stops the css selector from being interpreted.
I removed that selector and it works: https://plnkr.co/edit/d0eXisEaAqwvmF4cZL5f?p=preview
I am having an issue as I cannot override the styles of the elements on my website with my custom stylesheet. The issue is because of the foundation.css file as well as the normalize.css possibly. For some odd reason though the styles do override while being in a mobile resolution which has me completely lost. For example in my custom stylesheet (app.css) I have the following line:
li a {background-color: orange;}
Just for testing measures obviously. As the code above is shown you should be able to tell that any list with a link should have an orange background color. When viewing the website in my native resolution (1920px x 1080px) none of them are shown with an orange background. You can view an image of what I have explained.
As you can see the blue button shown with "Right Button Active" inside of it is the default color that the foundation.css stylesheet makes it. Now when I change my Google Chrome window to a thin window and take a look at the "Right Button Active" button it actually turns the button orange as you can see at the following picture.
I have looked at the other question mentioned on stack overflow: How do I get my #import stylesheet to override the main stylesheet?
and tried to follow that solution but that didn't work for me in solving my issue. What makes me confused about my situation is the fact that my stylesheet will work on the mobile dimesion window but when I am in my native resolution and have the window showing on fullscreen it does not show up as I have it styled in my custom stylesheet.
Here is my head.php file to show you how my stylesheets are sorted and / or arranged:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation example</title>
<link rel="stylesheet" href="foundation/css/normalize.css">
<link rel="stylesheet" href="foundation/css/foundation.css">
<link rel="stylesheet" href="includes/app.css">
<script src="foundation/js/vendor/modernizr.js"></script>
</head>
<?php
include 'header.php';
?>
Any ideas?
The Proper Selector
You need more specific selector to make it work like you need.
The better way is to set up variables in Foundation's settings.scss file. However, SCSS compilation is needed in this case and if you don't want to do it (or if you simply can't) these lines will be enough:
.top-bar-section li.active:not(.has-form) a:not(.button) {
background-color: #FFA500; /* orange color */
}
.top-bar-section li.active:not(.has-form) a:hover:not(.button) {
background-color: #F09600; /* darker orange, lightness -6% is Foundation's default */
}
Note: You don't need using !important if you include app.css style file after the Foundation's one. It is better to avoid of usage of this keyword.
CodePen working example
Note: If you don't use the proper selector then you take a risk than some other stuff change their color too which shouldn't be the correct behaviour. However, if you want to change blue color to the orange one in general you should use SCSS distribution of Foundation, change $primary-color variable and then compile your own CSS.
How To Find Proper Selector
You need some web development tool, e.g. Firebug, which is abailable for all modern browsers. Then use it as is described below:
Select inspect element tool.
Click on the element which you want to inspect.
Search for the attribute which you want to change - in your case, you are looking for attribute background-color. Then you can see the selector and you are also able to redefine color in the Firebug tool in place to see results immediately.
If your foundation.css has more specific rules to what you are trying to change, they could override your code done in app.css. One way to try this is to put the !important at the end of your CSS-statement, before the ; of the row.
In a case if that changes something, you should inspect your website via your browser's inspector in order to figure how it is being styled and what overrides what.
Please refer to this question for more information about load order and rule priorities.
You have set the orange colour here in app.css
ul.dropdown>li>a{background-color: orange !important;}
This is only pointing to the drop down list for styling, not the button you hover/click to get there. Add this to your app.css style sheet and I am confident it will fix it.
ul .has-dropdown a:hover {
background-color: orange;
}
I'm working on a web page in Google Chrome. It displays correctly with the following styles.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
It is important to note that I didn't define these styles. In Chrome developer tools, it says user agent stylesheet in place of the CSS file name.
Now if I submit a form and some validation error occurs, I get the following stylesheet:
table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: -webkit-auto;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
The font-size from these new styles is disturbing my design. Is there a way to force my stylesheets and if possible, completely overwrite Chrome's default stylesheet?
What are the target browsers? Different browsers set different default CSS rules. Try including a CSS reset, such as the meyerweb CSS reset or normalize.css, to remove those defaults. Google "CSS reset vs normalize" to see the differences.
If <!DOCTYPE> is missing in your HTML content you may experience that the browser gives preference to the "user agent stylesheet" over your custom stylesheet. Adding the doctype fixes this.
Regarding the concept “user agent style sheet”, consult section Cascade in the CSS 2.1 spec.
User agent style sheets are overridden by anything that you set in your own style sheet. They are just the rock bottom: in the absence of any style sheets provided by the page or by the user, the browser still has to render the content somehow, and the user agent style sheet just describes this.
So if you think you have a problem with a user agent style sheet, then you really have a problem with your markup, or your style sheet, or both (about which you wrote nothing).
Marking the document as HTML5 by the proper doctype on the first line, solved my issue.
<!DOCTYPE html>
<html>...
A user agent style sheet is a ”default style sheet” provided by the browser (e.g., Chrome, Firefox, Edge, etc.) in order to present the page in a way that satisfies ”general presentation expectations.” For example, a default style sheet would provide base styles for things like font size, borders, and spacing between elements.
It is also common to use a CSS Reset to normalize or remove inconsistencies between browsers due to differences between which base styles are applied by each browser.
From the specification...
A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language. ~ The Cascade.
For more information about user agents in general, see user agent.
Answering the question in title, what is the user agent stylesheet, the set of default styles in the browser: Here are some of them:
Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css
Serenity: https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/CSS/Default.css#L4
Mozilla Servo: https://github.com/servo/servo/blob/master/resources/user-agent.css#L9
Personal opinion: Don't fight with them. They have good default values, for example, in rtl/bidi cases and are consistent nowadays. Reset what you see irrelevant to you, not all of them at once.
Define the values that you don't want to be used from Chrome's user agent style in your own CSS content.
Some browsers use their own way to read .css files.
So the right way to beat this:
If you type the command line directly in the .html source code, this beats the .css file, in that way, you told the browser directly what to do and the browser is at position not to read the commands from the .css file.
Remember that the commands writen in the .html file is stronger than the command in the .css.
I had the same problem as one of my <div>'s had the margin set by the browser. It was quite annoying but then I figured out as most of the people said, it's a markup error.
I went back and checked my <head> section and my CSS link was like below:
<link rel="stylesheet" href="ex.css">
I included type in it and made it like below:
<link rel="stylesheet" type="text/css" href="ex.css">
My problem was solved.
I just wanted to expand on the response from #BenM based on what I read here from Ire Aderinokun. Because the user-agent stylesheet provides helpful default styling, think twice before overriding it.
I had a dumb error where a button element didn't look right in Chrome. I had partially styled it because I didn't want it to look like a traditional button. However, I left out style elements like border, border-color, etc. So Chrome was stepping in to supply the parts that it thought I was missing.
The problem went away once I added styles like border: none, etc.
So if anyone else is having this problem, make sure you are explicitly overriding all the applicable default user-agent styles for an element if you notice it looks wonky, especially if you don't want to reset the user agent styles completely. It worked for me.
Each browser provides a default stylesheet, called the user agent stylesheet, in case an HTML file does not specify one. Styles that you specify override the defaults.
Because you have not specified values for the table element’s box, the default styles have been applied.
I ran into this same issue, it was because I was working with non-semantic html
<!--incorrect-->
<ul class="my-custom-font">
<button>
<a>user agent styles applied instead of my-custom-font</a>
<button>
</ul>
<!--correct-->
<ul class="my-custom-font">
<li>
<a>now inherits from from my-custom-font</a>
</li>
</ul>
Once the HTML was updated, styles were applied correctly
Every browser will have a rendering engine responsible for converting HTML document to web page.
The rendering engine will have a stylesheet of its own for all the HTML elements, a kind of default stylesheet for all the HTML elements and this stylesheet is called user agent stylesheet.
The rules of user agent stylesheet can be overwritten by author stylesheet.
The rendering engine for google chrome browser is called 𝐛𝐥𝐢𝐧𝐤. And if you look through its source code you will be able to find the default stylesheet.
check this https://www.linkedin.com/posts/smruti-sagar-pattanaik-a3a000195_html-css-chrome-activity-7027888128115847168-USil?utm_source=share&utm_medium=member_desktop
I have a solution. Check this:
Error
<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">
Correct
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Put the following code in your CSS file:
table {
font-size: inherit;
}
I need to print report page that has couple of background images on it. But only these images are not printable. These images are logos actually for graph and hence very important in report.
I have another option that I can crop them and include in page as tag but this is last option. Hence before that I would like to know if there is any way to forcefully print these images? Can anybody help me out?
By default, a browser will ignore background css rules when printing a page, and you can't overcome this using css.
The user will need to change their browser settings.
Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.
HTML
<div class"graph-image graph-7">
<img src="graph-7.jpg" alt="Graph Description" />
</div>
CSS
.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}
#media print{
.graph-image img{display:inline;}
}
Using this code, or similar code, means the image is used once in html and once in css.
The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.
Having said that, what you're doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that's what you should use.
it is working in google chrome when you add !important attribute to background image make sure you add attribute first and try again, you can do it like tha
.class-name {
background: url('your-image.png') !important;
}
also you can use these useful printing roll and put it at the end of css file
#media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}
Google Maps used to do this bit where when you hit the "Print" link, what would be sent to the printer wasn't exactly what you had on the screen, but rather a differently-formatted version of mostly the same information.
It appears that they've largely moved away from this concept (I guess people didn't understand it) and most websites have a "print version" of things like articles and so forth.
But if you wanted to make a webpage such that a "printer friendly" version of the page is what gets sent to the printer without having to make a separate page for it, how would you do that?
You can achieve this effect by creating a css stylesheet which is targeted directly to printing, and another targeted directly for the screen.
Use the link tag:
<link rel="stylesheet" type="text/css" href="print.css" media="print, handheld" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
to embed your stylesheet into your document.
To hide is easy, just set your block style to hidden in whatever stylesheet you want and it wont be displayed. For example:
.newStyle1 {
display: none;
}
Then anything set to the style of newStyle1 will not be displayed.
The #media rule in CSS can be used to define alternate rules for print.This is often used to hide navigation and change the style to fit print better:
#media print {
.sidebar { display: none; }
}
You can also link a seperate stylesheet for print:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You can do this with the css when you specify media as print.
Another way, if desired, is to have the 'print' button on the page change the page in some way that you decide, then perform a javascript 'window.print();' to bring up the browser's print dialog.
There are several options available to you:
You can open a new window with slightly different data to be printed.
There are also CSS styles which you can use to alter the page layout.
Finally you can specify completly different style sheets for screen, printed media, Braille readers etc.
e.g. <link href="css/print.css" type="text/css" rel="stylesheet" media="print" />
See also CSS2 Print Reference
Use a print stylesheet.
Edit: Regarding the followup, you can't, in general, add things to a page with CSS.
One option is to include your print-only content in the page, and hide it for screen stylesheets. You should make sure that the page still makes sense without CSS though.
Another option is to use generated content, but this isn't supported by Internet Explorer 7 and below, and can be quite limited.
If the print-only content is an image, you can swap that out using one of the popular image replacement techniques.
The easiest way is to use CSS media types. For each CSS file you include, you can specify where it ought to be used: on-screen, when printing, for handhelds, for screen-readers, or various combinations of these.
Example: <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
This has been a standard since CSS2, and most browsers support it now. More information is available here: http://www.w3.org/TR/CSS2/media.html
CSS allows you to create stylesheets for particular types of media, meaning that you can have a stylesheet that only applies when you're printing a page, allowing you to cause it to be formatted differently.
Just include a media="print" attribute on your stylesheet link for that stylesheet.
This A List Apart article seems to be quite good on the subject.
I tried using different style sheets based on the media, but I ran into trouble getting all the options I needed in. Since then I usually redirect to a different entrance of our (Fusebox) framework (i.e. print.php in stead of index.php) which in essence is the same file except it sets an extra flag/constant.
In the XSL file associated with the page I then do additional work based on that flag/constant like leaving out the menu, columns of a table etc.
i.e. (Page shows a link that the user has to click to display the password on the screen. The print version has the password printed.)
if (!BOOL_PRINT)
echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{\$team_id}\" onClick=\"RevealPassword('{\$team_id}','{\$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n";
else
echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";
You can define css rules that are specific to a media type. The following is a css example (copied from http://www.w3.org/TR/CSS2/media.html, section 7.2.1) that specifies different font sizes what gets displayed on a web page and what gets printed.
#media print {
BODY { font-size: 10pt }
}
#media screen {
BODY { font-size: 12pt }
}
#media screen, print {
BODY { line-height: 1.2 }
}
Alternatively, you can specify what media a stylesheet should be applied to when including it in a page:
<link href="webstyles.css" type="text/css" rel="stylesheet" media="screen"/>
<link href="printstyles.css" type="text/css" rel="stylesheet" media="print"/>
<link href="commonstyles.css" type="text/css" rel="stylesheet" media="screen,print"/>
Yet another option is to have a hidden IFRAME that you call iframe.contentWindow.print() on. That will allow you to create an invisible layout that prints exactly as you want it to.
Of course, an even better solution is to export the file to a PDF and let the user print it out that way. PDFs produce the highest quality output, period. However, it is one more hoop for the user to jump through, so the rule of thumb is:
PDFs for when the print layout matters
HTML for when the pure text is more important than the layout
Anything you can do with CSS you can do in a print stylesheet. This means you can hide content in the print version which is shown in the screen version or hide content in the screen version which you want to show up when printing.All you do is apply display:none to the appropriate sections in the appropriate stylesheet.
Also it is a good idea to size your text in points for the print version (which is a bad idea for the screen version - stick to pixels, ems or percentages here). There is universal agreement as to what printed point sizes are where as mappings of pixels to points will vary with different resolution devices.
nsayer mentions having a print button change the layout of your screen and then kicking off a window.print()
This is a solution that will probably have been overlooked by a lot of people and should be considered when you think your users want a little more of a WYSIWYG. It should probably be a "printer friendly" link though that changes the media type of your sheet sheets rather than "print this".
Using jquery, you could do something like this (not checked):
$(document).ready(function(){
$("#printFriendly").click(function(){
$(link[rel=link][media=screen]).remove();
$(link[rel=link][media=print]).attr("media","screen");
});
});