I have this style inside a PHP file that is applied to an Element
line-height: 120px;
display: list-item;
display: -moz-inline;
list-style: none;
I want that if browser is Chrome then display:list-item and if it is Mozilla then display: inline
The above style works well in Chrome, but in Mozilla it is applied as display: list-item
How to apply specific CSS rules to Chrome only?
Here's a bunch of methods, that actually can help you. Just set style for mozilla and then overwrite it by the Chrome hack. But abstracting from that solution: maybe show us some bigger part of code (or even jsfiddle) so we can help you style it properly without any hacks.
Related
I'm trying to use CSS attr() to change background color of a pseudo :before element.
<ul>
<li data-color="#ff0000">R</li>
<li data-color="#00ff00">G</li>
<li data-color="#0000ff">B</li>
</ul>
Here's the CSS
ul {
list-style: none;
}
li:before {
background-color: attr(data-color, color);
content: "";
display: inline-block;
height: 10px;
width: 10px;
}
But the before element doesn't show background color according to the data-color attribute.
But when I add this CSS
li:after {
content: attr(data-color);
}
The :after element shows the data-color attribute content as the content.
Here's the JS fiddle http://jsfiddle.net/b7Rve/
What did I do wrong?
UPDATE
I just reread about color in the Mozilla developer docs. It says that color type is experimental. I guess I still need to wait until it's released.
Please, look at this other thread Setting width with CSS attr().
In short: "according to Mozilla Developer Network's documentation, is only compatible with the CSS content property [...], but cannot (yet) be used to generate values for other properties."
UPDATE MAY 16, 2016:
Looking at Mozilla Developer Network's documentation now is possibile but with caution:
The attr() function can be used with any CSS property, but support for
properties other than content is experimental.
So, actually you can use it but surely browsers' support, altough better than in the past, is still only rare and experimental.
Can you style a <abbr> tag using css? In firefox, it is displayed with dots underneath the words like in the picture below:
Is this a browser by browser thing? can you remove the dots or do you just use the title="title here" option?
thanks
Firefox 40 has a small change:
https://developer.mozilla.org/en-US/Firefox/Releases/40/Site_Compatibility#CSS
To remove default underline in Firefox, you now need to set CSS:
text-decoration: none;
Can you style a tag using css?
Yes, you can.
In firefox, it is displayed with dots underneath the words
Yes. Firefox default style is
abbr[title], acronym[title] {
border-bottom: 1px dotted;
}
Is this a browser by browser thing?
Yes, this behaviour is determined by the default stylesheet of each browser. Then, different browsers may display it different by default.
Can you remove the dots?
Yes, just override the default syle:
abbr[title], acronym[title] {
border-bottom: none;
}
It is possible to style the tag with CSS for modern browsers. However, a fallback for older browsers with JavaScript may be used. (But who wants to support IE 8?)
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(title);
}
This will add an absolutely positioned pseudo element top right of the tag using the attribute content within the title when the tag is hovered over.
Mr. Bunnyman.
Seems like your experiencing a cross browser issue.
Yes, you can style <abbr> tag. Example below.
abbr { border: 2px dashed red; }
If your experiencing an underline on a certain browser, try:
abbr { border-bottom: 0px !important; }
Can you style a <abbr> tag using css?
Yes, but you cannot style the title attribute—though you can fake it unreliably.
Is this a browser by browser thing?
Yes, default styles are set in the user agent stylesheet.
Can you remove the dots?
Absolutely. To remove them unset the text-decoration property in your stylesheet:
abbr[title] {
text-decoration: unset;
}
Inclusive design approaches are also possible.
You can style any HTML element with any CSS you want, the problem is, for some HTML elements it will have no effect.
In other words, you can add the CSS to whatever the heck you want, but the browser may not support your changes.
i.e. Styling the <head> element is possible, but it is pointless.
So I have a navigation menu that is generated by my CMS:
The menu's HTML is straightforward (edited for clarity):
<ul>
<li>Journal</li>
<li>Art</li>
<li>Work</li>
</ul>
I want the items to show up as hand-written text, in keeping with the general theme of the site, using separate PNG files for each menu item.
To do that, I used the CSS content property like so:
#headerNav .nav li a[href="/_site/en/journal/"]
{ content: url(/path/to/image.png); }
And it worked great! The HTML text of each item was replaced by the correct image:
However, alas, then I learned not every browser supports the content property on selectors other than :before and :after! Chrome and Safari do it, but Firefox doesn. However when I use :before, the HTML node isn't replaced, but the image is added:
How do I work around this?
What didn't work:
Making the <a> element display: none removed the :before part as well.
Making the <a> element position: absolute and moving it elsewhere won't work either.
Making the <a> element width: 0px screws up the layout because the images added through content aren't in the document flow.
What I don't want to do:
Of course I can output the images by hand but I want to work with the HTML the CMS is giving me, which is <li>s with text in them.
Any solution involving background-image would require me to specify each item's width and height in the style sheet, which I would like to avoid for the purposes of this question.
Turning the handwriting into a font is not an option.
Using JavaScript to replace the items on the fly is not an option. This needs to work using pure HTML and CSS.
Since you are doing this into a navigation bar you should have a fixed height making the next method possible to work:
First insert the image as content on the :before element and make it display:block to push the actual text of the a tag below.
li a:before {
content:url(http://design.jchar.com/font/h_1.gif);
display:block;
}
Then hide that text with a fixed height on your a tag:
li a{
height:50px;
overflow:hidden;
}
The Working Demo
Answer was answered before OP added the line
Any solution involving background-image would require me to specify
each item's width and height in the style sheet, which I would like to
avoid for the purposes of this question.
So if anyone interested in background-image solution can refer this, else can simply skip.
Am not sure how optimum solution I am suggesting is, but surely you can use background-image for each a element, using nth- pseudo, and set the fonts color to transparent, or use text-indent property with overflow: hidden;
So it will be something like
nav ul li {
display: inline-block;
}
nav ul li:nth-of-type(1) a {
background-image: url(#);
display: block;
width: /* Whatever */ ;
color: transparent;
text-indent: -9999px; /* Optional */
overflow: hidden;
font-size: 0; /* Optional, some people are really sarcastic for this */
/* Below properties will be applicable if you are going for sprite methods */
background-position: /* Depends */ ;
background-size: /* If required */ ;
}
The reason why I would suggest you is :-
Advantages :
Cross browser compatible
Can you sprite methods to cut down http requests to request image for each tab
Also, you are not losing the text which is between the a tags, which is really good as far as screen readers are concerned.
Disadvantages :
Set custom width for each
Note: If you are going for a sprite solution, than background-position is anyways a must property to be used, so be sure you check out the support table first, before opting the sprite method.
Credits - For support table
I would put PNG images into img tag and then set alt attribute.
<ul>
<li><img src="journal.png" alt="Journal"/></li>
<li><img src="art.png" alt="Art"/></li>
<li><img src="work.png" alt="Work"/></li>
</ul>
Apparantly IE11 doesn't have a User Agent Style for <main> and therefor no display: block; on it. Why is there no User Agent Style? Is this a bug or on purpose?
Adding display: block; to the main element is enough, tho.
The main element is indeed not fully supported by IE11. Adding main { display: block; } to your CSS is the best solution for IE9+. You don't need to make conditional comments - since display: block; is the default behavior for main elements, it won't mess up anything.
Is there any way to inspect elements that were added via the CSS :before selector, in the Chrome or FF web inspector and inspect their calculated styles (and manipulate them on the fly)?
Setup is
li:before {
display: block;
width: 50px;
height: 50px;
position: absolute;
}
So it's real block element without any HTML, but on inspection he only selects the related LI element. The "force element state"-option does not work either, it's only for interaction states like :hover but not :before
Yes, there is. Inspect the element itself (not the pseudo), the pseudo element's styles should show up below, before the inherited styles.
Pseudo elements now show in Chrome Inspector (as of Chrome 31). See the pseudo element in Chrome's built in inspector. You also can edit the css properties as you'd expect.