While inspecting the Chrome Dev tools, I noticed the following CSS fragment:
img {
content: url(image-src.png);
}
which works perfectly in Chrome (see Screenshot below).
This allows me to define the src attribute of an <img> tag via CSS. Doesn't work in Firefox. Until now I thought that is not possible to directly modify the src attribute via css and I have not found anyone talking about this. So, is this just a proprietary addition in Chrome or is Chrome implementing a W3C draft or something comparable I am not aware of?
The content property as defined in CSS 2.1 applies to :before and :after pseudo-elements only. By CSS rules, you can specify any property for any element, but specifications have limitations on what properties “apply to” (i.e., have effect on) various elements.
The CSS3 Generated and Replaced Content Module, a Working Draft, describes the content property as applying to all elements. It has an example of replacing the content of an h1 element by an image, and surely the same could be done to an img element.
But it’s just a Working Draft. The usual resources on CSS implementation status, QuirksMode.org CSS info and Caniuse.com, do not indicate the situation; they only describe the support to content for :before and :after (which is rather universal except IE 7 and earlier.
Now you can do that: http://chabada.esy.es/tests/0004.html
<style>
.redcross {
background: transparent url('redcross.png') no-repeat;
display: block;
width: 24px;
height: 24px;
}
</style>
<img class="redcross">
Related
I'm trying to add a line-through, in all browsers it works fine, except Safari.
It gets misalignment.
I'm not even using css, just an stag inside the html
<span class="price--old">
<s>{value}</s>
</span>
There is an issue with the line through and del
they both are't working in safari
I came up with an solution
.price--old {
width: 25px;
display: flex;
align-items: center;
}
.price--old::before {
content: "";
flex: 1 0 10px;
border-top: 1px solid #111;
}
.old-price {
margin-left: -25px;
}
<div class="price--old"><span class="old-price">200</span></div>
its working completely fine in safari and chrome
Every browser interprets CSS differently. I believe the reason it's not working is because the <s> tag "renders a horizontal line through the vertical center of the text," so I assume it's finding an odd "vertical center."
Per Apple's dev library:
s
Deprecated. Defines a block of text in strikethrough style. Use del to indicate document edits.
Discussion
The content inside the s element is rendered with a horizontal line through the center. The del element is more appropriate to show text that was removed. Styles should be more finely tuned using CSS instead of using HTML style elements when possible.
Availability
The s element has been deprecated in the HTML 4.01 standard.
Try using the <del> tag instead
<p>Let's try <del>this</del></p>
And let me know if that doesn't work. It looks ok on my computer in Safari, but I have some weird settings on my Safari for a work project rn.
A little more research shows that there is a semantic difference between del and s: What is the difference between <s> and <del> in HTML, and do they affect website rankings?
<s> and <del> both still exist in the HTML specification.
The <del> element represents a removal from the document.
The <s> represents contents that are no longer accurate or no longer relevant.
That is to say that they actually represent different things
semantically. Specifically would be used if you had an existing
document and wanted to indicate text that was in the document, but has
been removed. This would be different than text in a document that is
no longer accurate, but that has not been removed (you could use
for that).
You should not use or depend on either for styling even though most
browsers do have them strike-through by default. You should only rely
on CSS for presentation.
Site being developed here: http://new.brushman.com/about/
The CMS allows adding of in-line CSS on a page by page basis. This CSS is added to the page after all other .css files are loaded.
IE11 is ignoring the style, even-though it works in 8, 9, 10, Edge, and all the rest (Chrome, Firefox, Safari, etc)
The inline CSS is:
<style>
/* CMS Page about CSS */
main {background: #d70055;}
</style>
and is in the after all the css files are loaded
The interesting thing is that inspect element shows the background with a checkmark, and it's at the top of the list indicating it has the highest priority.
There are no opaque elements covering the element.
Some things I've tried:
!important
removing the comments
adding additional new lines
using rgba
Completely and thoroughly stumped.
This should work:
main {
display: block;
background: #d70055;
}
IE does not treat unknown types of elements as block elements - just like the <main> element in this case.
Unfortunatley IE11 does not support the new <main> html semantic element.
The following HTML/CSS code is rendering in IE (Version 8) but not in Firefox (Version 25)
Any reason why?
HTML:
<img class="buttonmini" id="btn_Actual_Effort" onclick="showEffortDetail()" disabled="disabled">
CSS:
.buttonmini
{
background: url(../newimages/effort_calendar.gif) no-repeat;
height: 16px;
width: 16px;
font-family: Verdana; /*font-size: 8pt;*/
cursor: pointer;
}
Short answer:
It can be fixed if you add a display: inline-block in your css.
Longer answer:
It also renders in Webkit based browsers (Chrome and Safari at least).
This seems to occur because Firefox does not interpret image tags the same way as other browsers.
The <img> tag is defined by w3 as an inline-block element.
When the image's source is included in the tag (e.g. <img src="thisIsMyImage.jpg">), Firefox interprets it correctly (as an inline-block element).
However, when there is no src available immediately in the tag, Firefox appears to interpret it solely as an inline element. This means you cannot define it's width or height.
Check out this jsfiddle for some experimentation with different ways of getting the background of an <img> tag to display.
In an img element, the src attribute is required by HTML specifications. If you omit it, the rendering and behavior of the element is undefined. (It may work with some browsers the way you want, and you might trick some other browsers to do the same, but any new version of a browser could break things down.)
Thus, use a content image (an img element with src attribute and adequate alt attribute), instead of a background image on an img element.
i have seen some people in css write something like
.together
{
display:inline;
display:inline-block;
}
not just restricted to display style, but say background-size or background-image for an example
what is the purpose of this? i mean the second one is going to override the first one, so why bother?
Usually this type of behavior indicates a browser hack for compatibility. When browsers detect a property or value they do not know, they ignore it. Thus, if you place the most widely-accepted properties first, browsers will "fall back" to that behavior if none of the latter properties are compatible.
There's a possibility that it's written that way for browser-compatibility. They probably want the element to have a display value of inline-block, but not all browsers support it on all elements. Sitepoint has a good reference for compatibility of the display property.
The background property is a shorthand for all of the background-related properties, so it's common to set background on one selector and then only overwrite specific background properties later on other selectors. And again, you might have multiple background declarations for browser compatibility.
Lets take the following example.
<html>
<head>
<style>
.carlist
{
background-color: red;
height: 30px;
margin: 10px;
margin: 20px;
}
</style>
</head>
<body onload="loadCars()">
Check div style.
<div id="mydiv" class="carlist"></div>
</body>
</html>
In the above example we have 2 margins declared. I checked and found that the 2nd declaration is accepted by browser(FF,IE,Chrome). So I think if we use this for browser compatibility then the most browser specific style should be declared at last. But there are other ways to define browser specific styles. So its better to have single attribute defined.
I have just recently started using NetBeans IDE (6.9.1) and have used it to add a stylesheet to my site-in-progress.
To my surprise, one element was automatically added:
root {
display: block;
}
Looking around, I could find some information about the :root pseudo-class but nothing about the root element itself.
What is the root element and does it have any use?
There is no element called root in HTML. The html element itself is "the root element" (which is the term given to the element which is the ancestor of all the other elements in the document), but this would be matched by html { }.
However, see the :root pseudo-class (with a colon).
From here: http://www.quirksmode.org/css/root.html
The :root pseudo-element selects the
root of all blocks in the page, ie.
the Initial Containing Block. In HTML
this is obviously the <html> element
Test stylesheet:
:root {
background-color: #6374AB;
padding: 50px;
}
If the :root
selector works the left and right
column of the page are blue, and the
white middle column is offset by 50
pixels.
root is a placeholder for any element in the stylesheet template of NetBeans IDE. It is like a dummy variable in calculus. Please put the cursor on y: in the root { display: block; } delete y: and type y. IDE pops up into the instruction window that gives valueable information. They conducts to such a meaning for the root as just a dummy variable. Examples are em {display: inline; } Additionally, root is the point where you begin, the deepest ancestor of the html tree with branches and leaves. So at the beginning you have a box by default and all branches and leaves follow that default unless you change their default display, when they occur, to other values such as, say, inline.
:root can be used to declare CSS variables
in case anyone finds this old question and needs the information, :root is often used in examples to declare CSS Custom Properties or "variables" that become available throughout the document, for example:
:root {
--darkGreen: #051;
--myPink: #fce;
}
section {
color: var(--darkGreen);
background: var(--myPink);
}
article h3 {
color: var(--darkGreen);
}
However, any element can be used as the selector for CSS variables (not just :root) so html or body will also enable any element on the page to access them. If anyone has a good reason for using :root, I'd like to know it.
References:
Using CSS custom properties (variables) .
CSS Variables: Why Should You Care?
Let's Talk about CSS Variables (explains why --, not $)
The :root element is the element who has no parents, so I guess that the only root element in HTML is the <html> element..
So when you use the :root selector to style, it will style the whole document.
(I found more information here: http://webdesign.about.com/cs/css/qt/tipcsschild.htm and here: http://www.w3schools.com/cssref/sel_root.asp).
There is a difference between root and html, the root pseudo-class is a CSS3 entity, and does not affect older browsers (MSIE 8 or less, Opera 9.4 or less)
html /* for all web browsers */
{
color:red;
}
You have to put a colon before the word root as follows...
:root /* for CSS3 web browsers: Chrome, Firefox, MSIE 9+, Safari, Opera 9.5+ */
{
color:blue;
}
If you used both of these CSS lines, MSIE version 8 or less (or MSIE 9+ when running in compatibility mode, which renders as MSIE 7) would show red text, most other browsers would show blue text.
Documentation and specs for 'root' can be found at the Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/:root
The :root selector allows you to target the highest-level “parent” element in the DOM, or document tree. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
In the overwhelming majority of cases you’re likely to encounter, :root refers to the <html> element in a webpage. In an HTML document the html element will always be the highest-level parent, so the behaviour of :root is predictable. However, since CSS is a styling language that can be used with other document formats, such as SVG and XML, the :root pseudo-class can refer to different elements in those cases. Regardless of the markup language, :root will always select the document’s top-most element in the document tree.