I would like to check whether a browser is going to show a special "native" style dropdown (such as the iPhone and iPod) without checking specifically by browser name. Is it possible to check for that capability in a more generic way without looking at the user agent by name?
I'd like to do this to determine whether to render a standard or more enhanced dropdown control.
I don't believe this is actually possible without a really poor solution. I bet the best way to go is to just detect the device because pretty much all mobile browsers use a native ddl for displaying options.
This can be achieved by using Modernizr's media queries and touch detection:
if (Modernizr.touch && Modernizr.mq('only screen and (max-width: 768px)') {
//it is a mobile / tablet device
}
Or use regular CSS media queries.
I'm an 90% sure of this answer: No.
You are looking to detect if you are on a browser that looks weird but you are defining weird subjectively. User Reda's answer is correct, but it violates part of your question (not to identify browsers by name). My point is that you need to identify the browsers by name because you're qualifier is subjective, so you won't find a JS/CSS test for it.
Browsers have complete control over what dropdown they show. Most are inconsistent with their implementation of CSS on these dropdown components. There are no standards saying a browser needs to expose any information about the dropdown at the application level.
To affect what you want, you need to find the browsers whose dropdown controls you don't like and list them out, and target them via Modernizr or other such trickery. Unfortunately that violates your question's intent, so I think the answer to your actual question is... no, sorry.
I'm currently checking for the existence of window.orientation and it seems to do the job for android and ios.
You can check the appearance css property
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
and if it is not 'none' then your input has native styling.
You can find the possible values of appearance here:
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance and here http://trentwalton.com/2010/07/14/css-webkit-appearance/
As i read this question i got an idea for a dirty solution. Just a guess but maybe it helps:
Place your native element into the HTML and try get it in JavaScript with the elementFromPoint function. (MDN link)
If you get no element or the returned element is not your native one you know it is not displayed.
try something like this
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
$('#SOMEselectpicker').selectpicker('mobile');
}
Related
I'm developing a website that should run in ancient browsers (IE 7/8/9, Safari 5.1.7). Our target customer is the old people.
I'm no expert in javascript and I searched for solution. My title question is very straight-forward.
I used input radio and others that has custom design using before and after.
If it's checked. I just toggle in after and before display property in css.
The problem is when the user is using ancient browser, the input radio will never appear. My idea is toggle display in input radio if the browser doesn't support pseudo-elements.
For CSS feature detection there really is no need to reinvent the wheel, tools like Modernizr do this perfectly and have a very small footprint, since you can select only the feature detects that you need.
Seeing as you want to support IE <8, I would strongly advise you to use it, since you're probably going to run into a lot of situations where CSS/JS features are unavailable.
Detect if they have a sufficient browser: http://caniuse.com/#feat=css-gencontent
Basically, IE8 (maybe 9 depending on what you need) and older don't work, everything else does.
You may find the library Modernizr useful in this instance. It allows you to test for browser features.
Optionally if you want to shim it so you know that the browser will support it you can use Selectivizr
In IE 6/7/8 a <select> element, if given a defined width, does not automatically expand once opened. With browser sniffing (jQuery example was to use $.browser.msie and $.browser.version) I could detect the current browser to a degree of certainty and, for the relevant browsers add in a custom handler for selects.
In jQuery 1.9 the $.browser object has been removed. I am still using an older version in production, and am able to browser sniff and show auto-expanding select menus accordingly; However, this isn't a long term solution if we're going to keep up with the later releases of jQuery.
I've had a look through the properties of select via for(var i in document.createElement('select')) { ... } but can't see anything obvious relating to whether or not the menu will automatically expand.
Is there such a thing? Ideally, I'm looking for a vanilla solution that doesn't require browser sniffing. An if(!property in document.createElement('select')) { ... } would be fantastic.
[Edit / Addition] I know about jQuery migrate and understand it will probably tide us over. I'm not overly keen to load in more things for one (at the moment) tiny inconvenience.
From the jQuery API of jQuery.browser:
We recommend against using this property; please try to use feature
detection instead (see jQuery.support). jQuery.browser may be moved to
a plugin in a future release of jQuery.
I investigated and found the jQuery Migrate Plugin which has the $.browser feature, the code is available at github.
I have a client who hates the tooltips shown in browsers by the alt and title attributes of images. They requested they be removed. Obviously this is an issue for both SEO and Accessibility.
While the accessibility thing is not a huge deal to me, the SEO factor is. My initial thoughts are to remove the alt and title attributes of the images with a quick JS script. Anyone see any issues with that?
The alt and title attributes are two different things.
The alt attribute is used for accessibility reasons and is required by the standards set by the W3C. In the United States, it's also part of the Section 508 laws and regulations. The alt attribute behaves poorly in older versions of Internet Explorer by showing it's contents via a tooltip. I know for a fact Internet Explorer 9 no longer has this behavior.
The title attribute is used to force the browser in to showing a tooltip with it's contents.
My advice to you is use the alt attribute exclusively instead of the title attribute. Advise your client to update their browser to a more standards compliant browser if a tooltip irks them that much.
Modern screen readers read the generated DOM. This means if you remove tags via JavaScript, you are not only invalidating your code after the fact, you are possibily hurting those who will visiting the site using assistive technology.
I highly recommend you don't do it.
More information
Target was sued and settled because of the alt attribute: http://www.sitepoint.com/target-settles-accessibility-lawsuit-for-6-million/
Because of this landmark case, it's safe to say that Section 508 DOES NOT only apply to federal and government websites.
If accessibility is not an issue, I see no issues using JavaScript to remove the content. Assuming you're OK with using jQuery, this is the easiest way in my opinion:
$(document).ready(function()
{
$('[title]').removeAttr('title');
});
You could also remove the title content in the onmouseover event and then add it back on the onmouseout event for the sake of SEO.
In vanilla JavaScript, you could use:
var images = document.getElementsByTagName('img');
for (i=0; i<images.length; i++){
images[i].removeAttribute('title');
images[i].removeAttribute('alt');
}
JS Fiddle demo.
Reference:
removeAttribute() at the Mozilla Developer Center.
You should consider if you want to remove these features only under certain circumstances. I experience a lot of similar ideas in daily business, because some people do not like to understand what certain things a good for, and maybe handle them by themselves ...
... which brings me to the idea to eventually add a Greasemonkey script, which provides the desired functionality instead of worsening the website by means of accessibility, etc. At least it should be an additionally configurable option, maybe by setting a cookie or stuff like that.
Maybe you can convince the client it is a better than getting rid of something, to allow to make everyone the choice for their own, and activate the default settings for best SEO and accessibility.
I've made a web-app using the jQuery Mobile framework for which I would like to provide a fall-back, for lower-spec phones.
My question is... what is the best way to target JQM-capablephones? I saw a similar question posted on the jquery forum. One of the answers suggested http://detectmobilebrowser.com/ which provides a long list of handsets.
Is this the best way, or should I be testing for browser-capabilities rather than actually targeting handsets. If it is the latter what feaures are considered to be 'Grade-A' featues?
Cheers
Progressive enhancement is what you should aim for, jQuery allows you to have a single codebase and have it work across the range of devices.
Consider this:
All links to other pages are regular html links, links will still work without AJAX support because they'd just send you to the location of the required page
All major framework elements are built around lists, links, and a few divs. No HTML5 required for rendering content
At the bare minimum, all phones can display a good amount of styling, allowing you to display the content no matter how capable
Do you have custom interfaces which wouldn't work at all without full support for jQuery mobile?
I agree that graceful degradation is the best solution. I would add that using the noscript tags is also a good way to provide graceful degradation by adding adding functionality via HTML for phones that have no support for JS.
I think it will be difficult to find a browser-capability (or even a set) that defines whether the phone will work with JQM. In my own experience I have used WURFL, an open source device detection library, that provides capability information. However I used it to target specific devices to include device specific CSS and remove all JS for other devices that I know do not support it (to remove the overhead of the JS being downloaded).
WURFL: http://wurfl.sourceforge.net/
JQM advertises that it provides graceful degradation:
Graceful Degradation: jQuery Mobile uses the very best HTML 5 and CSS 3 features to provide the best possible experience in the most-capable browsers. However we don’t consider this to be an all-or-nothing proposition: Less capable browsers will still receive the best possible experience that their platform can handle. They may not have all the gradients or fancy transitions of the best platforms but they’ll still be highly usable. The most basic browsers will easily degrade back to simplified HTML and CSS.
I have also tested multiple JQM pages in a single mobile page which work great (very speedy) in JQM but suffer from the same problem mentioned (all pages show up when javascript is turned off in the browser of a smart phone). To work around this issue, only use a single page per JQM page (you give up speed and uniform page transitioning though). In regards to the NOSCRIPT tag option, that tag is NOT universally recognized in all browsers. To work around that issue, you could try something like the following:
<div id="no-js">
<!-- Place HTML without javascript here -->
</div>
<div id="js">
<script language="javascript">
// place javascript here which would be ignored by browsers not support javascript or with
// javascript turned off
document.getElementById("no-js").style.display = "none"; // be sure to hide the non javascript
// div
</script>
</div>
The above logic would work in either NOSCRIPT tag type browsers as well as those that do not recognize NOSCRIPT.
dlausch
I'm writing some code that involves CSS tabs, but IE doesn't support the :target css3 attribute. I have a work around by checking the hash value in an interval (ew), but I want to only have that code run when :target is not supported. I would do the regular IE check, except early versions of Firefox do not support it, nor does early Safari or Opera. Does anyone know how to test for :target support?
You can test for CSS support by adding a rule like #someid:target { visibility:hidden; color:#abcdef; } and then setting the target to #someid, reading if the color is #abcdef, and then reseting the hash.
This will, however, generate entries in the browser history: 1 for when you navigate to the id, and 1 for when you reset it to whatever it was before. It may also create a flicker in your tabs, so that may not be ideal - but I don't know what you can get away with.
Ideally, tabs should ideally read and write the hash for bookmarkability. But I don't think that :target is the ideal solution to creating tabs. I know it looks appealing to begin with (did to me). Given the poor support of the selector, how badly it scales with nested or multiple tabs, and how volatile it becomes with other markup (someone adds a #skip-to link on the page), it is less headache to implement with good old clicks.