Today I was extending my CSS a little bit for an anchor navigation with numbered listitems.
Since I reset my list items in a normalise.css I had to specify the default value to the list-style property
In most cases 'default', does the trick. But today in Chrome developer tools I noticed this wasn't the case for 'list-style'. Code hinting in Chrome showed me the value 'initial'. I have never seen that property before, w3.org doesn't talk about it and sublime text 2 isn't highlighting it.
Is this some kind of a new unofficial value?
nav.anchor-navigation ol {
list-style: initial;
}
list-style is supported in all modern browsers (and here it is in the specification), but initial is not supported on IE and Opera. (specification: here and here)
They are "official" values, however, if by "official" you mean they are in the specification.
Related
I am writting css as
.hidetext { -webkit-text-security: disc; }
To showing in table by hidding this text using following code.
<tr><td>Ramp : </td><td class="hidetext"><?php echo $_POST["uma"] ?></td></tr>
This is working on chrome it not working on mozilla.
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
In short, Firefox does not support it.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security
However, there is a package that aims to provide Cross-browser alternative to -webkit-text-security
https://github.com/noppa/text-security
Any css property beginning with -webkit- is only supported by chromium/chrome based browsers such as Chrome, Opera, Edge and so on. But Firefox is not one of them, hence it does not work.
I've applied css -webkit-text-security: disc; to mask the word as password, but it does not work in Internet Explorer.
Here is my code:
.hide{
-webkit-text-security:disc;
}
<h1 class="hide">HideMe</h1>
It is working on chrome but not in IE.
Please give me the solution.
Thank you.
-webkit- is a vendor prefix:
Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process. Developers should wait to include the unprefixed property until browser behavior is standardized.
… used by the webkit rendering engine which is not used by Internet Explorer.
It is so experimental that it doesn't even appear in draft CSS specs. No other browser supports it, or a version of it with a different vendor prefix.
If you want to get that effect, you'll need to apply JavaScript (e.g. by using an invisible password field overlaid on an element for which you add bullet characters based on the length of the value of the input each time the input event fires.
I have a little website, and I wanted to have no margin by doing:
<p id="demo" style="margin-block-start:0em;margin-block-end:0em"></p>
But the object still has a margin on every browser except chrome. (Chrome on IOS also does not work)
What have I done wrong? I have seen some other problems that were related to some small typos, but I can't find any of that here.
Quite simply (at the time of writing), this is a CSS Logical Properties and Values Level 1 experimental property and is not supported by most browsers or is supported but behind an "experimental" flag which is set at an individual user level.
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
MDN
I would suggest a fallback of margin:0 pending final acceptance.
My checkbox have a default webkit style like this:
input[type="checkbox"] {
-webkit-appearance: checkbox;
box-sizing: border-box;
}
Now the checkbox is not working in IE8.
I have tried to overcome this by adding:
<!--[if IE 8]>
<style>
input[type="checkbox"] {
font-size: 12px;
line-height: 1.2em;
/*-webkit-appearance: none; */
}
</style>
<![endif]-->
this to my HTML ,but still it's not working.
As I am not a front end developer ,if there is any thing wrong in the question please feel free to edit.
Note:From the comments i got to this question I understood that webkit styles won't work for IE.So I think i need to find a way to just show default check box style with out Webkit for IE.Any one have any thoughts?
Styles the begin with -webkit- will only work on browsers that use the Webkit rendering engine.
IE does not use Webkit, and thus it does not support anything that starts with the -webkit- prefix.
The whole point of the prefix system in CSS is to tell us that the prefixed styles are non-standard and/or experimental. They will only work in one specific browser engine.
In many (but not all) cases, where there is a -webkit- style, this are also equivalent -moz- and -ms- styles for Firefox and IE. There may also be some browsers that support the style without a prefix. Therefore, when using a prefixed style, you should always check for browser support and whether you need to also specify other alternative syntax.
But even then, they'll only work if you're using a version of the browser that supports it. IE8 in particular is a very old browser, and lacks support for a lot of more modern browser features.
You should not be surprised if modern techniques don't work in IE8. There are work-arounds and 'polyfill' scripts for some features, but others are simply out of reach for this browser.
If you need to support IE8, you need to make sure that any features you're using are going to work, and if they're not, you need to either accept that and give IE8 users a reasonable fall-back solution (so the site is still usable), or find a work-around or alternative.
A good site to visit to find out whether any given feature works across various browsers is CanIUse.com.
It's because ie is not based on webkit, but chrome and safari are. For your checkbox, theres css tricks with :before and :after pseudo class.
Take a look here for details http://csscheckbox.com/
I need to hide the full screen button of the video tag in HTML5.
Is there any way to achieve it ?
Thanks.
I think you can accomplish this by changing the css for the #document fragments, these are DOM1 specs and supported by all browsers, but about the styling, I'm not sure.
Simple webkit browser (chrome on windows) specific solution
The following solution is webkit specific
video::-webkit-media-controls-fullscreen-button {
display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}
Here is the fiddle for it.
Warning:
This will not work on browsers who have a rendering engine other than webkit e.g. Firefox or Internet Explorer, or obsolete versions of Opera that had Blink/Presto.
This may not work with implementations of webkit browsers in Operating systems other than windows e.g. Safari on macOS.
Update:
After multiple readers complained that the aforementioned solution did not work for certain browsers, I'm updating the answer.
Taking care of Vendor specific implementations:
The above solution is -webkit- browser specific and was tested in Chrome on Windows.
The implementation of shadow DOM hasn't been standardized, and therefore, may vary from one browser vendor to another.
Almost all browsers today have great developer tools, but some features are intentionally locked, but can be opened with a little effort, for instance, in Firefox most such configurations can be accessed in the about:config page.
Developers are advised to unlock the shadow DOM features in their browser.
Then, they can inspect the <video> component
How to enable shadow DOM selection in Chrome
Go to Chrome > Developer Tools > Settings (gear icon)
Under Elements look for Show user agent shadow DOM option
Check (select) the box
You'll be able to inspect the underlying shadow DOM
Observe their respective styling
You will notice that they're similar to pseudo class selectors
Some unsolicited free advise for Hiding the full screen button of the video tag in HTML5
Finding the solution can be as easy as writing CSS with pseudo class selectors
But like every other CSS, it might require a lot of trial-n-error
And you might undergo a lot of frustration to make it work
But always remember, it's worth it.
Additionally, as #paulitto suggests, DOM methods can be implemented after removing controls attribute from <video> element. Refer this tutorial for more.
You need just to write this code in your css:
video::-webkit-media-controls-fullscreen-button {
display: none;
}
And the fulscreen button will hide
You can disable the fullscreen button using the controlsList="nofullscreen" attribute
Supported Browsers: Chrome, Edge, Edge Beta. It doesn't work with Firefox.
Refer the fiddle
Attribute values:
controlsList="nodownload nofullscreen noremoteplayback"
You must have controls attribute in <video> tag to get the features of controlsList.
Reference Page
I think you are not able to do that without hiding all the controls.
You can use its dom methods to implement your own controls and design them to look exactly the same as built in controls
Or you can also use external html5 video plugins to implement this
You can write your custom code for controls
eg. For changing video time use below code
document.getElementsByTagName('video')[0].currentTime=10;
Below link provides all necessary examples to do manual controls on video with javascript
HTML5 Video Events and API