is there a way how to style timeline thumb (seeker) of an <audio> tag? I'm able to target and style most of the element using audio::-webkit- shadow DOM pseudo selectors.
However, I was unlucky finding a selector to match the playback timeline thumb. It's done by <input type="range">, another shadow DOM element. So basically I'm trying to target shadow DOM pseudo element inside another shadow DOM pseudo element.
My playground is on https://jsfiddle.net/cLwwwyh5/.
I just need this to work in Chrome (Chrome App)
Going through the list of available modifiers:
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button
Unless I'm missing it, styling the timeline thumb through CSS doesn't seem possible at the moment.
But you're so close to getting it all to look right, argg! It therefore pains me to advise using something like MediaElement.js, or creating your own custom player like in this jsFiddle. It does, however, come with the added bonus of working cross-browser, so that's something.
Here's how I do it. jsfiddle
You can use CSS Filter
it's a little bit hacky and limited but it's the best we can do right now.
the following CSS changes the default color to red but it'll affect the whole player even the background if it have saturation (not black, white or a shade of grey)
audio::-webkit-media-controls-panel {
background: transparent;
-webkit-filter: hue-rotate(143deg) saturate(10);
}
so it's better to apply changes separately
audio::-webkit-media-controls-volume-slider {
-webkit-filter: hue-rotate(143deg) saturate(10);
}
audio::-webkit-media-controls-timeline {
-webkit-filter: hue-rotate(143deg) saturate(10);
}
How to calculate the needed hue-rotate() and saturate()
I took the default color #4285f4 and used Photoshop's Hue/Saturation to get the wanter hue degrees and saturation value. but you can use whatever tool you have or calculate it your self
for example using tools like this or this that converts to HSL (Hue, Saturation, Lightness)
I can see that the color #4285f4 have an HSL value of (217, 89%, 61%)
the color red aka #FF0000 have an HSL value of (0, 100%, 20%)
Hue Value ranges from 0 to 360° so to get to red I need to hue-rotate(143deg) (360 - 217) and saturate(10) is the 100% Saturation of wanted color red. read more about saturate()
for the rest of elements, here's a list of known sneaky selectors.
Webkit Pseudo-Element Selectors (Shadow DOM Elements)
Related
CSS defines currentColor as a color equivalent to an element’s color property. It’s similar to a CSS variable, but on a per-element basis. When currentColor is used as a color value in any CSS property, it computes to whatever is the color value for the element to which it is applied.
So, my question is not whether something currentBackgroundColor exists—I have combed through the CSS Color specification and am fairly confident it does not—but whether it could exist.
Borrowing from the currentColor definition, I presume currentBackgroundColor would be defined as something like:
The value of the ‘background-color’ property. The computed value of the ‘currentBackgroundColor’ keyword is the computed value of the ‘background-color’ property. If the ‘currentBackgroundColor’ keyword is set on the ‘background-color’ property itself, it is treated as ‘background-color: inherit’.
Can anyone point to any implementation issues which I may not be considering?
Can anyone point to any implementation issues which I may not be considering?
Yes. There could be circular dependencies:
* {
background-color: currentColor;
color: currentBackgroundColor;
}
Moreover, currentcolor can be useful because text has a single color. But backgrounds can have additional things like background-images and such, which might counterintuitively leave background-color set to the default of transparent. And then currentBackgroundColor is not much useful.
Yes it could. For example, it would make it very easy to create an section of your text inverted-colour, ie you could swap the foreground and background colours to highlight something.
However, suggesting this as a CSS feature would be fighting against the tide. There used to be a whole bunch of CSS colour keywords, for things like the scrollbar colour, and the standard button colour, and the colours of the 3D shadows on the buttons... but they were all dropped from CSS some time ago.
There are lots of things in CSS that could be useful that aren't in there. Personally I'm more excited about CSS variables. When they become mainstream we are unlikely to be too worried about colour keywords like this
There are certainly many cases where currentBackgroundColor would be very useful.
Alternative techniques I've used are...
CSS Custom Properties (CSS Variables), eg --backgroundColor.
Make use of currentColor to set background-color. This approach is only possible on containers (and specific children) that are not using the foreground colour. Child elements can inherit color and set background-color:currentColor.
I've had luck using the Canvas system color, which is defined as the "background of application content or documents". Just to be safe, I also set the text color to CanvasColor to ensure I'm not accidentally implementing white-on-white or black-on-black.
However, this will not reflect the page's CSS—even body { background-color:purple; }. All it does is key on the system's configuration. It does seem to match the default "dark mode" coloring scheme, which solves my particular problem.
Example implementation:
p { padding:1ex; }
.purple { background-color:rebeccapurple; color:#fff; }
.canvas { background-color:Canvas; color:CanvasText; }
<p class="purple">
This block is white on purple.
<span class="canvas">This sentence uses "Canvas" coloring.</span>
This sentence does not.
</p>
<p>This is normal text.</p>
I'm wondering what happens if a CSS style is supplied for a property which the browser supports, but the style itself isn't supported.
Take for example the following in IE8;
background: url(../path/to/img.png);
background: rgba(0,0,0,0.8);
Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?
Thanks :).
Does IE8 simply ignore the second style due to it's lack of supported for CSS3 colours?
The answer is YES, it will completely ignore that value, and hence it won't render any color, it's a common practice to use a fall back with a hex value like
.class_name {
background: #000;
background: rgba(0,0,0,.5);
}
So, when you write the background twice, it's completely valid, the browsers who understand the rgba() will render an opaque background, but the browsers who don't understand rgba() will use #000.
Though, there are various workarounds for that, like, you can use :before or :after, with filter property with a negative z-index, which can be used as an opaque background, or you can do is, use a normal 1x1 px opaque png image only for IE8.
For example
background: url("IMAGE_URL_HERE")\9; /* Targets IE8 and below */
I just took a look on CSS background-clip. Its a way to mask text with an image. (or the other way round? ^^). Anyway, i thought the order of statements in CSS doesn't effect the result, but with background clip it does.
The CSS for this effect looks like this usually:
.text{
color: transparent;
background: url(pic.ending);
-webkit-background-clip: text;
}
So, this is the first <p> in the fiddle below.
But when I change the order of this to following:
.text_wrong{
-webkit-background-clip: text;
color: transparent;
background: url(pic.ending);
}
It doesn't work. The text isn't masked, the background takes place in the hole <p>. So the error occurs when background clip is before background, right?
Why? Do you have any idea? Sorry for my bad English. (Heres the fiddle.)
background is the shorthand notation for the background properties. This will overwrite all other background rules made earlier. Even though -webkit-background-clip has a vendor prefix it is still a background property. In your second example it gets overwritten when you set the background properties with the shorthand notation.
To make your example work you can use background-image instead of background.
Example
/* sets a single property */
background-color: red;
/* overwrites all single properties */
background: no-repeat;
Demo
Try before buy
This is called Cascading and the ulimate goal of CSS is to represent those items that are declared last in the cascade.
For instance, lets assume the below to be your CSS declaration in stylesheets.
div{height:15px;}
div{height:30px;}
div{height:20px;}
So the div will take the height to be 20px as this is the last declared rule and it will override all the other rules declared earlier.
Hope this solves your query.
According to the w3c specs the value text for background-clip is not a listed value in the specs. Therefor support might be buggy!
http://www.w3.org/TR/css3-background/#background-clip
Determines the background painting area, which determines the area
within which the background is painted. The syntax of the property is
given with
= border-box | padding-box | content-box
I am actually do not even know hot to define this, but I need to change the text background color. Never did this. Now when I am selecting the text, lets say pressing the left mouse button and marking a proportion of the text all the background becomes red, so I do not know what element defines this property.
You need the ::selection pseudo-element:
::selection {
background-color: red;
}
However, note that since this is a fairly new CSS3 selector, you need to use the browser specific prefixes for maximum compatibility:
::-moz-selection
Also be aware that this has been removed from the CSS3 specification. It will not work in IE below version 9, but will work in the majority of other modern browsers.
You are probably looking for this (note double : is correct):
::selection {color:#fff;background:red;}
::-moz-selection {color:#fff;background:red;}
I am making a website that uses nothing but jquery-ui for theming.
Well, in my application I need to do alternating colors per row on a list. Right now all of the rows are just the color of .ui-widget-content. Well, I can apply a class on alternating rows with no problem, but I want for the alternating color to be a very transparent version of the background color in .ui-widget-header. How would I do this using nothing but html jquery and CSS? (I'm really hoping to not have to use javascript in order to do this little trick though)
The easiest way to do this is to create a small flat image in Photoshop, Fireworks,GIMP,Kreta etc. and set the color / opacity there. The above solutions will allow for transparency but they are
1) Not standards-compliant and
2) They May cause the text contained in the div to also be transparent (usually an undesirable result in design).
So...
.ui-widget-content-alt {
background: transparent url(images/my_80%transparent_black_bg.png) top left repeat;
}
.ui-widget-content {
background: transparent url(images/my_80%transparent_white_bg.png) top left repeat;
}
Assuming that I didn't misunderstand your question, and that you can use a separate CSS class for alternate rows like .ui-widget-content-alt, you may want to use the following CSS:
.ui-widget-content, .ui-widget-content-alt {
background-color: #000;
}
.ui-widget-content-alt {
filter: alpha(opacity=20);
opacity: 0.2;
}
The opacity property is the CSS standard for opacity values, and works in Firefox, Safari, Chrome and Opera.
The filter property is for IE.
You may want to check the following article for compatibility of the opacity property with older browsers:
CSS Tricks - CSS Transparency Settings for All Browsers
There is no standard way of doing it.
You can use css opacity and fiter to achieve it.
Something like the following would give you 80% black transparent color
.someClass { background-color:#000; -moz-opacity: 0.8; opacity:.80;filter: alpha(opacity=80);}
Using this will cause your CSS to fail compliance checks.