CSS media query display-mode: fullscreen does not work on safari - javascript

CSS media query display-mode:fullscreen does not work on safari (the css inside the media query never gets applied). Current safari version: Version 14.1.
#media all and (display-mode: fullscreen) {
...
}
Full example here: https://jsfiddle.net/gnbcv6em/3/
It works on chrome but not safari. I've tried triggering fullscreen with the browser's fullscreen keyboard shortcut or by triggering it manually with js, but neither works on safari.
Also, https://developer.mozilla.org/en-US/docs/Web/CSS/#media/display-mode shows that safari supports it.
Perhaps someone has come across this issue and can help?

Faced with the same issue. Solved by this:
body:-webkit-full-screen .selector {
display: none;
}
And SCSS version (if you have nested selectors):
#at-root body:-webkit-full-screen & {
display: none;
}
At this moment Safari doesn't support :fullscreen selector, so need to use :-webkit-full-screen.

Related

How to disable/remove specific controls in the UI of safari native video player in fullscreen mode?

When going fullscreen in IOS safari mobile (IOS 16), I have a case where I want to remove the option for the subtitle selector due to a certain issue with the video source.
I've used the safari remote inspector and noticed the shadow DOM inside the video tag, however after experimenting with many pseudo selectors, none had an effect to hide any of the controls.
audio::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
However I recently noticed that youtube in safari has managed to hide the option entirely when going fullscreen, see attached image below
So is it possible to customize the native controls for IOS in fullscreen mode?

Remove element if Safari/iOS

I am creating a website where I have created a fullscreen button, which can be kind of useful on mobile - at least for my website. This is done through some Javascript. However, if I'm not mistaken, this fullscreen mode does not work in Safari (or maybe just iOS in general). So basically, I would like to remove the button in those cases, since it doesn't work for them.
Can this be accomplished with CSS, or do I need some Javascript as well ?
I think this is what you are looking for:
#supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
}
#supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
}
CSS media query to target only iOS devices

How to Disable onclick text highlight in mobile browser (Chrome)?

I'm using Boostrap 4 to build a Web. A simple code such as below:
<div class="col-12 p-2" id="Maincourse">
<h1 class="m-0">Main course</h1>
</div>
I use my Android Chrome Browser(version 80.0.3987.149) click on the text, it will highlighted the text and popup google search.
How can i disable it? I Don't want to set user-select: none because I need to let the user highlight the text when long press.
.disable-select {
user-select: none; /* standard */
-moz-user-select: none; /* firefox specific */
-webkit-user-select: none; /* Chrome, Opera and Safari*/
-ms-user-select: none; /* IE, ms-edge */
}
Source1: https://www.w3schools.com/cssref/css3_pr_user-select.asp
Source2: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
version compatibility
desktop:
Chrome: 54+
Firefox: 69+
Opera: 41+ (15+ with vendor prefix)
Safari: 3+
MS Edge: 12+
IE: 10+
mobile
Chrome for Android: 54+
Android web-view: 54+
Firefox for Android: 4+
Opera for Android: 14+
Safari on IOS: 3+
refer to the sources for more info and version compatibility.
try this:
-webkit-tap-highlight-color: transparent;
I've been doing the user-select: none fix for this for awhile and found it unsatisfactory, so I started searching around for a proper name for the feature in order to see if there was better fix/write-up for it and I came across this Google Developers post from Paul Kinlan (apparently the feature is called "Touch to Search"):
https://developers.google.com/web/updates/2015/10/tap-to-search
which describes the behavior in detail and the various ways in which you can disable or enable the behavior.
Relevant excerpts pertaining to your question:
Tap triggering is enabled for any plain text that is selectable and non interactive or not focusable. When the page has a click handler that responds to a tap on text, Touch to Search automatically detects the response and ignores it since we know the developer intended to handle the event. Using a touch-and-hold gesture to manually select text also triggers the Touch to Search bar. Users can enable or disable the feature using a preference under Chrome's Privacy settings.
As the author of a site there are often times when you don't want a tap gesture on certain element to trigger a search. To ensure that Chrome does what you intend, make those elements:
Focusable: add a tabindex=-1 property on the element.
Interactive: Use any of several standard ways to indicate that an element is interactive:
Use accessibility markup to indicate the element has a widget role, or widget attributes. For example, any element with role=button won't trigger. Adding accessibility markup has the added benefit that your page will be more readable by visually impaired users.
Any JavaScript click handler that calls preventDefault(), or manipulates the DOM or CSS will not trigger Touch-to-Search.
Non-selectable: using -webkit-user-select: none; Non-selectable text will not trigger Touch-to-Search even when using the touch-and-hold gesture.
By adding role="dialog" into the wrapper solved my problem.
But I have no idea why, anyone can explain?

If opera - something different in css?

Is there any way that I can override something in css and use different size if user/visitor uses opera?
Example, in chrome, ff and safari this works great:
.section#search h3 a {
background: url("../img/search.png") no-repeat 0 50%;
padding: 0 0 0 25px;
position: relative;
}
But in Opera padding is not really good... I need to add top: 16px; into it or to change padding to padding: 0 0 36px 25px;
Is there any "hack" like for IE or maybe javascript usage? No ideas...
All I need is to add that top or new padding just for opera. Thanks ;)
With the conditional-css tool, you can target opera, but engine is important. conditional-css.com explains:
Conditional-CSS isn't really all that interested in which browser the
user is using, but rather what rendering engine the user's browser
utilises. This is why Conditional-CSS uses 'Gecko' rather than the
well known Firefox as one of it's browser conditions. Likewise for
Safari 'Webkit' is used. This allows other browsers using the same
rendering engines to receive the same targeted CSS. An exception to
this rule is made for IE (rather than using 'Trident') since this is
what the IE conditional comments use and Trident isn't particuarly
well known. Similarly for Opera, since only the Opera browser uses
it's Presto rendering engine, 'Opera' is used.
http://www.conditional-css.com/advanced
they write that a conditional tag is formed like:
[if {!} browser]
[if {!} browser version]
[if {!} condition browser version]
and that browser names are as follows:
IE - Internet Explorer
Gecko - Gecko based browsers (Firefox, Camino etc)
Webkit - Webkit based browsers (Safari, Shiira etc)
'SafMob' - Mobile Safari (iPhone / iPod Touch)
Opera - Opera's browser
IEMac - Internet Explorer for the Mac
Konq - Konqueror
IEmob - IE mobile
PSP - Playstation Portable
NetF - Net Front
So it should logically follow, according to them, that you can target via:
[if Opera]
like this in a CSS block:
[if Opera] .box {
width: 500px;
padding: 100px 0;
}
or like this for a CSS include:
<!--[if Opera]>
<![endif]-->
You can use a JavaScript library like Modernizr to test for browsers and use the css classes it adds to target Opera specifically.
Before you plan to use work-arounds and hacks, consider the following:
Is your page in strict mode? If not, add a doctype to the very first line of the page:
<!DOCTYPE html>
Otherwise, your page is in quirks mode, and it's the main cause of inconsistencies across browsers.
Try using a CSS reset. This should iron out little inconsistencies across browsers like paddings, margins, alignments and more. Load this style before any other styles.
what versions and types of opera? you can use this media query
#media not all and (-webkit-min-device-pixel-ratio:0) { }
to target opera 10, 10.5,11, and 11.6
check it out here: note, i only viewed in chrome19 and opera 11.6 http://jsfiddle.net/jalbertbowdenii/fw94a/
better
x:-o-prefocus, p{}
http://jsfiddle.net/jalbertbowdenii/6pRPC/

designMode or contentEditable on mobile safari [duplicate]

Safari HTML Reference: Supported Attributes says:
contenteditable
If true, the element can be edited on
the fly; if false, it cannot.
Availability
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
However, on my iPhone, I can't get it to work. Anyone have success with this?
You can try it with this document (admittedly not pure html, but that document works in desktop Safari, and Chrome and Firefox 3). I haven't been able to get even the simplest html document to be editable in mobile Safari.
contenteditable has been added to iOS 5 beta 2, according to one of the developer videos from WWDC 2011. I suggest signing up to Apple's Safari developer program and downloading that video from the WWDC videos page.
If you sign up to be a Safari dev, you also gain the privilege to submit your Website to their online iOS Web app gallery.
Edit: I've confirmed this works on my iPad running iOS 5.0.1. Try it out here: http://www.quirksmode.org/dom/execCommand/
It works, kind of. I thought contenteditable doesn't work on iPhone before. When I set a div to contenteditable I couldn't move the cursor/pointer to where I wanted to move it. But, when I was fiddling around XHTML with contentEditable within iBooks.app on iPad, I found that "execCommand('insertText', null, 'foobar');" worked within Mobile Safari.
If you wanted to, you could make a virtual keyboard using
clever css and javascript, and make it into a bookmarklet.
If you cannot focus the contenteditable element try adding this to your css
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
The design mode and content editable are working fine in IOS 5.But in previous versions it is not working.There is post
http://mobile.tutsplus.com/tutorials/mobile-web-apps/safari-5_html5/
I think this is because editing HTML requires quite an advanced user interface. That's why desktop Safari implements it, while Mobile Safari doesn't.

Categories