Can anyone have idea about how to work pointer-events: none in ios operating system.
Using this i need to disable input box in ios devices.
please guide me if you have any idea about this.
thanks.
If you're asking about within a web view, pointer-events:none is currently supported in all major browsers except Opera Mini, so should work fine on iOS. (But if the goal is to "disable an input field" you should probably do that by setting its disabled attribute instead of by blocking pointer-events.)
If you're asking about native code, CSS rules aren't relevant.
Related
I have CSS that isn't working on any browsers on my smartphone (Galaxy S7 with Oreo). This is an example line of the code;
div[data-quickedit-field-id="node/859/body/en/full"] th{background-color: #81CFD6;}
Here's some background; this site has other code that works on my phone, this code works on desktop, I've checked the W3C Schools website and the Mozilla Developer website (as well as a few others) and I haven't been able to find any information on this, so I'm wondering if there's any reason the data attributes wouldn't work on smartphones.
Only use quickedit for users that have access to in-place editing else when a testbot checks as an anonymous user it generates an error. Try to avoid the code unless it is necessary.
Attribute selectors should work in all the modern mobile browsers. Checked that with your attribute and value and it is working good in my mobile (I've checked in Motorolla One Power and Redmi Note 7 Pro using chrome browser).
Here is the link to check in mobile: http://naasu.me/su-fixes/css/are-css-data-attributes-available-on-mobile-browsers/
If this is still not working for you, try using contains selector by adding * with the attribute([attribute*=value]).
I'm using SVG sprite and referencing fragment identifiers in it for CSS background image. The CSS code looks like this: background: url(sprite.svg#icon-1);.
It works on Firefox/Win7, Google Chrome/Win7, IE11/Win7, IE10/Win8, Firefox/Android 4.4.2, and Google Chrome/Android 4.4.2. However, it does not work on iOS 9.3.4.
Here is a demonstration on Plunker. (And here is a shorter url for easier accesses for mobile devices: goo.gl/P9xG4E)
Is it possible to get iOS working with this method?
== Update ==On Android 4.4.2, unlike Firefox and Google Chrome, the built-in Android browser does not support the feature.
Can I Use tells us that this is not supported on Safari (Mac or iOS).
Also note that it wasn't supported on Android browser up to 4.4.4, which are still quite common, and some other browsers have limitations.
I found a polyfill which fixes WebKit browsers' this issue. And it works for me.
Please check its demonstration for implementation.
I am trying to print out a table that has inputs with colors. these colors are assigned by the users to each input. this means each table is differnet each time someone edits it. I found a work around with webkit browsers but firefox does not work of coarse!!!!
#media print {
[id^="output26"] {-webkit-print-color-adjust: exact;
This works fine on chrome and safari
Any ideas? Is playing around with the css a solution?
You may want to read the warning for this propertys documentation.
Let me quote it:
Non-standard
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.
Is there a way to target only Chrome on Mac ONLY? I have used:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit Styles here */
}
But that renders in both WIN and MAC.
I would be open to approaching from the other angle and target IE and FF for Mac only if that's my only option.
I'm also wanting to NOT use JavaScript if I can avoid it.
Any ideas?
You can't do this with CSS at all may be you have to use javascript for this.
What problem are you specifically looking to address with Chrome on Mac? This seems like the kind of thing which will break as soon as Chrome on Mac updates to fix whatever issue you're having - and with the speed they put out updates, would be pretty soon. Perhaps you should edit your question in such a way that it asks about the original problem you're dealing with, not the workaround you're trying to attempt.
You could parse through PHP's $_SERVER['HTTP_USER_AGENT'] variable to detect the browser and OS, and echo browser/OS-specific styles based on your findings. This way, the appropriate styles are served even if the user lacks the JavaScript necessary for client-side browser sniffing.
(Of course, viewers spoofing their user agents may trick your system into serving the wrong CSS, but who cares? It's their user-experience, they should know what they're getting into.)
I am a CSS newbie. Is there a tool that can help debug CSS styles applied to a web page.
How does one generally debug CSS and resolve issues when some elements on the page are not appearing as they should? For now, I have to painfully comment out CSS declarations one by one to understand how the styles are getting displayed.
By browser:
Firefox there is a plug in module called Firebug. It is easy to install and very powerful. It is even better when combined with 'Web Developer' for Firefox.
Internet Explorer has a Developer Toolbar, which is not as good as Firebug but good enough to check things still work in IE. Additionally there is a tool called IE DOM inspector. There is also a version of Firebug for IE caled Firebug Lite.
Google Chrome comes with built in tools similar to Firebug. See the 'tools->developer' option in the pull down menu to the right of the address bar. This allows you to see the css rules used by each element. It also has Javascript debugging support.
Safari uses a tool called Web Inspector.
Opera has a built-in utility called Dragonfly.
You use Firebug in Firefox, which makes debugging a lot more easy.
And built-in DragonFly in Opera.
You can use the Firebug plugin for Firefox. It is very useful for CSS.
You can dynamically switch on and off styles and fields from styles. It is great.
If you're not using Firefox you can now get Firebug Lite which you can use in IE etc.
Web developer tools like Safari’s Web Inspector or Firebug for Firefox can help you to debug your CSS. Those tools can show you the rule cascade applied to a specific element and allow you to change or disable particular properties.
Use Firefox to develop and test your CSS first, then switch to other browsers to test your code. This is a generally accepted method IMHO.
Firebug is great, but it works even better if you combine it with Web Developer plug in for FF.
There is a great site, worth checking out, with lots of info about CSS and HTML development.
When you need to debug IE - specific problems. I've heard people telling IE DOM inspector is not too bad. You can also try tools described in this post.
Now you can use my newly released tool for this in most modern browsers!
HTML Box Visualizer - GitHub