We Keep Coding

Detect standalone mode on old chrome version

According to this article, display-mode: standalone only can detect on M48 or newer version. Is there any way to detect the mode on older version?

No this is not possible.
Check this article
#supports for display-mode is only supported starting with Chrome 48.

Although it's not a direct answer but it's offering a workaround.
As much as I understand the article, you can configure your website (in the manifest.json) to open with querystring (for example) if it opens from the homescreen. So you can set a flag on the DOM - let's say add class to the body tag. In this way you can detect in eitgher css or js if you run in standalone mode.
For example:
var isStandalone = false;
if (location.search.indexOf('standalone=true') > -1) {
isStandalone = true;
document.body.classList.add('standalone-mode');
}
// from now on you can check if you run in standalone by checking 'isStandalone' param.
header {
background: red;
}
/* this is a style for standalone mode only */
body.standalone header {
background: green
}

For applications wrapped in electron you might use what is described here: https://github.com/electron/electron/issues/2288
window && window.process && window.process.type
or
navigator.userAgent.toLowerCase().indexOf(' electron/') > -1;

Safari ignores css dir="ltr" after switcing css files

I added English for my website so it will support 2 languages.
On the first language, I use css file where everything is RTL.
Now, when i switch to English, I remove the RTL css file and add a css file where dir is LTR.
On Chrome, IR and Firefox it works fine.
But on Safari (I tried only mobile safari) it partaily ignores the LTR.
You can see it here: http://parkplanner.co.il/ and use the 'English' button on the menu to change language.
This is the LTR css file - http://parkplanner.co.il/css/ltr-adj.css
Thanks!

use direction:ltr; not the dir attribute

This looks like well known issue.
Read the thread.
Force DOM redraw/refresh on Chrome/Mac
// in jquery $('#parentOfElementToBeRedrawn').hide().show(0);
// in plain js document.getElementById('parentOfElementToBeRedrawn').style.display = 'none'; document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';
If this simple redraw doesn't work you can try this one. It inserts an empty text node into the element which guarantees a redraw.
var forceRedraw = function(element){
if (!element) { return; }
var n = document.createTextNode(' ');
var disp = element.style.display; // don't worry about previous display style
element.appendChild(n);
element.style.display = 'none';
setTimeout(function(){
element.style.display = disp;
n.parentNode.removeChild(n);
},20); // you can play with this timeout to make it as short as possible
}

CSS Inliner in Javascript (premailer)

I use CKEDITOR 4 and I want to filter a HTML content to insert the style directly in the HTML Elements like MailChimp with its CSS inliner (http://beaker.mailchimp.com/inline-css). But I have to do in Javascript must, someone an idea?
I can use jQuery and PrototypeJs.
I can't use an external API.
My test jsFiddle with CKEditor (on paste) : http://jsfiddle.net/EpokK/utW8K/7/
In :
<style>
.test {
outline: 1px solid red;
}
</style>
<div class="test">Hello</div>
Out :
<div style="outline: 1px solid red;">Hello</div>
I find this solution : http://tikku.com/scripts/websites/tikku/css_inline_transformer_simplified.js
but this trick opens a tab and it is blocked by default in Firefox ...
API solution : http://premailer.dialect.ca/

Edit: Cleaning up my GH account from unfinished PoCs I removed the tool mentioned below, so the link leads to a 404. There's someone else's project, though, which may interest you: http://styliner.slaks.net/
I created simple CSS styles inliner - styliner.
It works on Firefox and Chrome. May also work on IE9+ and Safari 6, but I haven't tested it yet. This version does not need a new window - it uses iframe (so it may not work on IE - it always needs some tricks to make iframes work :).
It lacks support for CSS specificity, so at least for now, to use it, you would have to sort rules manually. But maybe I'll find some time to add this feature soon.

I'm not sure if this will help but I found this nice little jQuery/javascript method that can be embedded into a page - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/
I've edited it a little to support IE and also to support a page with multiple CSS files attached applying the styles in the correct order. The if(rules[idx].selectorText.indexOf("hover") == -1) line is necessary because jQuery (as of 1.8) can't use the :hover selector anymore apparently.
$(document).ready(function ($) {
var rules;
for(var i = document.styleSheets.length - 1; i >= 0; i--){
if(document.styleSheets[i].cssRules)
rules = document.styleSheets[i].cssRules;
else if(document.styleSheets[i].rules)
rules = document.styleSheets[i].rules;
for (var idx = 0, len = rules.length; idx < len; idx++) {
if(rules[idx].selectorText.indexOf("hover") == -1) {
$(rules[idx].selectorText).each(function (i, elem) {
elem.style.cssText = rules[idx].style.cssText + elem.style.cssText;
});
}
}
$('style').remove();
$('script').remove();
$('link').remove();
}
});
The page can then be copy/pasted into the email body.

testing support for overflow-y:auto in browsers

I want to test if a particular css property attribute is supported in the browser. For a css property, i can do it like
var overflowSupport = document.createElement("detect").style["overflow-y"] === ""
But what if i have to check for a particular class or attribute. For example, i want to test the support for
overflow-y:auto
and use it for scrolling a large div, where supported, and use iScroll at other places.
How can i do that? Pls help.

Kind of an old question, but I thought I'd share my finds here, especially because the code sample given by Inkbug does not work as you would expect.
Overflow property support
overflow-y has been around since the CSS2.1 times (however it's been standardized pretty recently, in the css3 spec). For that reason, the support on desktop browsers is very decent.
Now, what you're asking here is whether or not the scrolling behavior actually works when we specify overflow-y: scroll on a particular element.
This behavior was introduced fairly recently in mobile browsers. More precisely, Apple introduced it in iOS 5 with a -webkit vendor prefix (see page 176 of Apple's documentation).
I can't find specific info for Android though.
What I can say about support for overflow-scrolling (vendor prefixed or not):
latest nexus7 (Android 4.1.1): yes
Android 2.3.x: no
iOS >= 5: yes
iOS < 5: no
Feature detection for scrolling-overflow
If you want to give scrolling behavior to an element, I would advise using feature detection.
Here's a gist showing how you can detect this scrolling-overflow property (it's been integrated in Modernizr since). If you don't want to use Modernizr, here is a simpler version that does pretty much the same:
/**
* Test to see if overflow-scrolling is enabled.
*/
var hasCSSProperty = function(prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(document.body, null)[prop];
} else {
return document.body.currentStyle[prop];
}
};
var supportOverflowScrolling = function() {
if (hasCSSProperty('overflow-scrolling') ||
hasCSSProperty('-webkit-overflow-scrolling') ||
hasCSSProperty('-moz-overflow-scrolling') ||
hasCSSProperty('-o-overflow-scrolling')) {
return true;
} else {
return false
}
};

When one assigns an invalid value to a dom style, it gets rejected. Therefore this should work:
var testOverflowEl = document.createElement( "x-test" );
testOverflowEl.style.overflowY = "auto";
var overflowSupport = testOverflowEl.style.overflowY === "auto";

Arnaud Brosseau's reply surely deserves the checkmark.
Anyway, consider also using Modernizr.
Using their addTest and testAllProps API functions, you can easily check for any css property support:
Modernizr.addTest('overflow-y',function(){
return Modernizr.testAllProps('overflowY'); /* camel case here */
});
Then you can check it with JavaScript:
if(Modernizr.overflowY){
/* do something if supported */
}
but it will also add a class to the <html> tag, so that you can custom rules on CSS too:
.overflowY #element {
/* style for browsers supporting overflow-y */
}
.no-overflowY #element {
/* style for browsers NOT supporting overflow-y */
}

Removing Style Attribute in IE6, 8, and Firefox

I'm attempting to work with Javascript through a cross browser platform that is required to support IE6, 8, and Firefox. I've quickly discovered that none of these browsers contain a matching Javascript library.
The goal is to have items that dynamically hide or show depending on the selection of other items. Normally I would just toggle between display:none and display:block but for the work of another developer, I can use the display:none to hide the field, but switching to display:block screws up the layout. The solution is to simply rip out either the display setting in the style, or tear out the style altogether. Unfortunately, I ran into the library problem
Firefox supports everything I've tried so far
IE8 & 6 didn't support getElementById().style.removeProperty('display')
IE6 doesn't support getElementById().removeAttribute('style')
Below is my code as it currently is, working in IE8 and FF...but it is required to also get it working in IE6.
function displayPrevLPQ(bShow) {
if (bShow) {
document.getElementById('prevLPQ').removeAttribute('style');
} else {
document.getElementById('prevLPQ').style.display = 'none';
}
}
function displayBusUnitSub() {
var buVal = document.getElementById('BusinessUnitID').value;
document.getElementById("BusinessCycle").selectedIndex = document.getElementById("BusinessCycle").getAttribute("default");
document.getElementById("Ibap").selectedIndex = document.getElementById("Ibap").getAttribute("default");
document.getElementById("Bca").selectedIndex = document.getElementById("Bca").getAttribute("default");
switch (buVal) {
case '11':
document.getElementById('buSub0').style.display = 'none';
document.getElementById('buSub1').removeAttribute('style');
document.getElementById('buSub2').style.display = 'none';
break;
case '1':
document.getElementById('buSub0').style.display = 'none';
document.getElementById('buSub1').style.display = 'none';
document.getElementById('buSub2').removeAttribute('style');
break;
default:
document.getElementById('buSub0').removeAttribute('style');
document.getElementById('buSub1').style.display = 'none';
document.getElementById('buSub2').style.display = 'none';
break;
}
}
So, the question is...how can I tear out the Style or display properties in a way that will work across all three browsers?
Thanks in Advance.

Use a javascript library like jQuery that already has all the browser compatibility issues sorted and abstracted away.
From the docs it appears to support everything you need:
jQuery supports these browsers:
* Firefox 2.0+
* Internet Explorer 6+
* Safari 3+
* Opera 9+
* Chrome 1+
As for the specific jQuery function to to this - look at .toggle().

...required to support IE6, 8, and Firefox. I've quickly discovered that none of these browsers contain a matching Javascript library.
jQuery, Prototype, and YUI all support those three browsers (and more). I expect many of these others do as well. Closure doesn't (at least, it doesn't claim to and we know Google dropped IE6 support in most of its products), but it's the first major library I know of to wave bye-bye to IE6.

Use a class instead. If you only use one class on your element, it's as simple as this:
CSS:
*.hidden {
display: none;
}
JavaScript:
function show(el) {
el.className = "";
}
function hide(el) {
el.className = "hidden";
}
show(document.getElementById("foo"));

you can still toggle between display:block/none;
target the IEs via conditional comments or IE specific hacks to fix your layout issues.
so lets say that you have width set on id uSub0 of 200px. and its breaking in IEs, you need it to be 190px for them. heres how you can target them. example:
uSub0{width:200px}
/** ie6 only **/
uSub0{width:200px; *width:190px}
/** ie7 only **/
uSub0{width:200px}
:first-child+html #uSub0{width:190px}
/* ie7 only **/
uSub0{width:200px}
+html #uSub0{width:190px}
/* ie6, ie7, ie8 **/
uSub0{width:200px; width: 190px\9}
/** ie7, ie8 **/
uSub0{width:200px; width/*/: 190px}