For example, an anchor tag, if not explicitly given a style, already has a style. It is blue, it goes purple when visited, and changes the cursor on hover.
Where does Chrome load these styles from?
Is there a Google Chrome style-sheet on my computer, or accessed by chrome through a rel link that has entries like :
...
a.visited {
color:purple; /* just because */
}
a.hover {
cursor:pointer;
}
... /* dozens of other CSS styles */
Where can I find this Google Chrome style-sheet file, or online resource?
Ideally, something like : chrome://internals/styles
Or something like : http://cdn.google.com/chrome/html.css
All browsers have a user agent stylesheet. This is essentially the default styles that they decide to apply, there are no requirements or official standards, though browsers will always try to behave as you would expect (blue hyperlinks, purple once clicked, etc).
The webkit one can be found here
Other browsers can be found here
When you inspect element you will notice certain styles. For example, Inspect any element on a webpage then click the <head> tag. You will notice the following:
A head is just like any other element so it would normally appear on your web page. Obviously this isn't what developers want, and they certainly don't want to have to hide the head in every stylesheet so the user agent does it for them, as default.
Take a look at these two links.
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Browsers' default CSS for HTML elements
They should help you out a little.
Related
I have a drupal 8 site.
I have created a subtheme and altered the css of this subtheme.
My modification are showing and working fine in chrome and firefox but in internet explorer 11 and Edge it doesn work.
for instance this css code:
a,
a:hover,
a:active,
a:visited {
color: #f4512c;
}
When I inspect the given element, i see the css properties of style.css being applied, but they are overridde by scaffolding.less..
How comes?
When I use !Important it is applied, but I would rather not use that !Important...
The code is fine, and should work on IE11 and Edge.
If you have opened the page with Edge before, the old stylesheet might still be cached in the browser.
To make sure you dont get cached contents do the following:
In Edge press F12 -> Go to Network tab -> Check "always reload from server" (4th icon to the left) -> Reload the page
You can also inspect the in the "elements" tab, and search for the stylesheet. You can open the stylesheet itselt and look for your new styles. This way you can see if you the correct stylesheet is being loaded.
Edit:
The styling from Bootstrap is overwriting the code because it uses more specific selectors. You can add a class to your element, and use that selector, or you prepend it like so: body a { ... } Here is more about specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/specificity
For some reason, a ::selection declaration in my CSS simply is not working, it is always behaving as per the default (light blue background on Chrome, Mac).
The code works fine in a jsbin
::selection {
background: red;
}
Thus my assumption is something is being overridden somewhere in the project, but I can't find another declaration of ::selection anywhere in the stylesheet. I was wondering if there is any way to see this in the Developer Tools to try to pinpoint or debug why it isn't working in my project?
Even giving the CSS an !important declaration isn't helping.
edit
OK, I tried debugging further by adding:
<style type="text/css">
::selection, ::-moz-selection {
background: red !important;
}
</style>
to the footer of the document, and thus it turns out that one cannot combine these two declarations in one statement, which was mentioned by Chris Coyier in this comment:
I have a question: Why can´t you put ::selection and ::-moz-selection together and define a value for both of that? If you do that FF will ignore the values.
That’s a good CSS lesson! When a browser doesn’t understand any part of a selector, it ignores
the whole selector (even if they are comma separated). There are some
exceptions but mostly in old browsers (IE 7?).
So all is well and working again, but the question still stands I suppose, is there a way to see this declaration in the devtools somehow?
edit 2
Ok, of course, when the declaration sits on its own line, then it appears in the inspector.
edit 3
A very relevant SO question: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
I'm just surprised Chrome doesn't just still show the malformed declaration in the inspector rather than hiding it completely.
Try to check via inspect element.
Right click on web page
Select "inspect" option
In inspect element panel, there will be style appear in right hand side.
You will find your :selection declaration in it.
On http://onpole.org/roland/, I have used background-images to decorate the page.
I, myself, use Mozilla Firefox, so I created my CSS with that browser in mind.
However, if I open the same website in different browsers (Chrome, Safari, have not tried IE yet) I see minor differences, which disrupt the layout.
Examples:
(this one actually is wrong in Firefox)
At the top of the page, there is a drawing, in which a white line comes out and goes down, into the next part of the website.
In Firefox there is an error when it comes to the next part,
But in Safari and Chrome this line is correct!
I would post more examples, but apparantly my reputation is too low to post more than 2 links. There goes being specific.
There's also a part where there are arrows coming out of the line. This works fine in Firefox, but has an error in both Safari and Chrome.
So the first error is not correct in Firefox but works fine in Safari and Chrome.
The second error is exactly the other way around.
I am posting this here because I need advice on how to tackle these problems.
Should I make browser specific css where I move the line 1 pixel?
Or is there some other way? Or do any of you know why these differences occur?
Just a suggestion but why not create a separate stylesheet? When I helped redesign my company's website, my supervisor and I found that our stylesheet rendered properly in Chrome but not in Firefox. Ultimately we created a stylesheet to fix those areas. It would only launch if the browser being used was Firefox.
Using a simple PHP command (and assuming that your Gecko stylesheet will be stored in a folder called CSS in your site's main template directory), here's how you can detect if the browser being used is Firefox which will then force the Gecko stylesheet to launch before the page is even loaded:
// firefox
if ($this['useragent']->browser() == 'firefox') {
// add gecko stylesheet
$this['asset']->addFile('css', 'css:gecko.css');
}
Important: When writing a stylesheet meant for Gecko-based browsers only, the sheet must be written as follows:
#-moz-document domain(YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
Only the code in between the { } will be read in Firefox. The best thing of all is if you want to target specific subdomains on your site, you can add a declaration for that subdomain all on the same stylesheet.
#-moz-document domain(YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
#-moz-document domain(SUBDOMAIN.YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
Just remember to keep your rules inside the curly { } brackets and you'll be good to go.
I have a page that works fine in most browsers(Safari, FF, Chrome, IE9) but on IE8 it won't show the body background color. It shows the Body bgcolor as white. In the Developer Tools, I see that it is overriding all the CSS and getting some background-color:#fff from somewhere.
I have my scripts (jquery 1.6.2) just before the closing tag as is suggested on the HTML5 Boilerplate (html5boilerpate.com) - not sure if not having the scripts in the head section causes this behaviour?
Anyone any ideas ? This is really weird.
A couple things to try.
Toy with the load order of your css files. Whatever is loaded last will be the style if you don't specify !important
Inspect your rendered html for inline <style/> blocks as they could be causing trouble and not show up in the style tab as a specific css file.
When in doubt target background-color directly as background will
sometimes be overridden by a background-color property
body{background-color:#e6e6e6}
If that doesnt work you could force
override it with body{background-color:#e6e6e6 !important}.
Background color not working on Internet Explorer (IE)
IE apply some filter before rendering web page . that's why some page colors changed .
you can add following line in your CSS file to avoid it.
filter: none !important;
Scanning through the blueprint css, it looks like the background color #fff is being set in two different locations: textarea and in a select box. Try removing the background color property from textarea and see if that helps, or even better comment out the blueprint references to see if that's causing the problem. Seems like 9 out of 10 times a property gets overridden in IE its because a third party library is assigning a diff property to the same element.
I was wondering if anyone knew of a tool that will, when given a number of css files/css rules and a selector - classname, id, element etc. Return all styles that apply with their precedence ordered.
I not, is this doable via JavaScript - I can get the css rules applicable to an element at the time, but can I get those that have been overridden?
In Firebug you can see all qualified styles for any element. It lets you trace the precedence order, but requires you to use Firefox.
(The presentation image on the Firebug page actually shows this behavior. Note the font-size for the h1 selector has been overridden by the more specific .siteTitle class selector.)
Unless you are looking for something you can automate, Firebug should actually be able to solve this one for you. Bring up the context menu (right click) on an element on a pace, pick "Inspect element" and the Firebug pane appears. In the right hand side, you got all CSS rules relevant for the element - those that are overridden are marked with strike-through text:
(source: getfirebug.com)
Try any developer toolbar for Iexplorer or Firefox. Most of them will be able to show exactly what style will be applied to elements. I recon that for example Firebug (addin for Mozilla Firefox) can show what styles will be applied, and where they are overwritten by other styles. Good luck ;).
edit: IE Developer Toolbar also has this functionality.