Browser Fallbacks: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „Immer wieder kämpft man mit Features die nicht von allen Browsern unterstützt werden. Es gibt verschiedene Wege Fallbacks für solche Dinge zu implementieren…“)
 
 
(Eine dazwischenliegende Version von einem anderen Benutzer wird nicht angezeigt)
Zeile 1: Zeile 1:
 +
Veraltet - Siehe [[Browser - Hacks]]
 
Immer wieder kämpft man mit Features die nicht von allen Browsern unterstützt werden. Es gibt verschiedene Wege Fallbacks für solche Dinge zu implementieren. Eine große Hilfe kann Modernizr sein. Manchmal ist es besser (aus Zeitgründen und um JavaScript Overkill zu verhindern. Einfach gleich eine kleine JS Lösung zu Implementieren.
 
Immer wieder kämpft man mit Features die nicht von allen Browsern unterstützt werden. Es gibt verschiedene Wege Fallbacks für solche Dinge zu implementieren. Eine große Hilfe kann Modernizr sein. Manchmal ist es besser (aus Zeitgründen und um JavaScript Overkill zu verhindern. Einfach gleich eine kleine JS Lösung zu Implementieren.
  
Zeile 10: Zeile 11:
 
==== Placeholdr jQuery Plugin ====
 
==== Placeholdr jQuery Plugin ====
 
https://github.com/vote539/placeholdr
 
https://github.com/vote539/placeholdr
 +
 +
Minimized
 +
<pre>
 +
 +
// Placeholdr, Copyright (c) 2013 Shane Carr
 +
// https://github.com/vote539/placeholdr
 +
// X11 License
 +
(function(b,c,e,d){var g=function(){var a=b(this);a[d]()||(a.addClass(c),"password"===a.attr("type")&&(a.attr("type","text"),a.data(c+"-pwd",!0)),a[d](a.attr(e)))},h=function(){var a=b(this);a.removeClass(c);a.data(c+"-pwd")&&a.attr("type","password");if(a[d]()===a.attr(e))a[d]("")},k=function(){b(this).find("["+e+"]").each(function(){b(this).data(c)&&h.call(this)})};b.fn.placeholdr=function(){if(e in document.createElement("input"))return this;b(this).find("["+e+"]").each(function(){var a=b(this);
 +
a.data(c)||(a.data(c,!0),g.call(this),a.focus(h),a.blur(g))});b(this).find("form").each(function(){var a=b(this);a.data(c)||(a.data(c,!0),a.submit(k))});return this};b.fn[d]=b.fn.val;b.fn.val=function(a){var f=b(this);if("undefined"===b.type(a)&&f.data(c)&&f[d]()===f.attr(e))return"";(f="string"===b.type(a))&&h.call(this);var k=b.fn[d].apply(this,arguments);f&&!a&&g.call(this);return k};b(function(){b(document).placeholdr()});document.write("<style>.placeholdr{color:#AAA;}</style>")})(jQuery,"placeholdr",
 +
"placeholder","placeholdrVal");
 +
 +
</pre>

Aktuelle Version vom 6. Juli 2023, 07:32 Uhr

Veraltet - Siehe Browser - Hacks Immer wieder kämpft man mit Features die nicht von allen Browsern unterstützt werden. Es gibt verschiedene Wege Fallbacks für solche Dinge zu implementieren. Eine große Hilfe kann Modernizr sein. Manchmal ist es besser (aus Zeitgründen und um JavaScript Overkill zu verhindern. Einfach gleich eine kleine JS Lösung zu Implementieren.

Links[Bearbeiten]

Browserfeatures mit Modernizr testen

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills (für viele Fälle Plugins etc. vorhanden)

Snippets[Bearbeiten]

Placeholder imitieren[Bearbeiten]

Placeholdr jQuery Plugin[Bearbeiten]

https://github.com/vote539/placeholdr

Minimized


// Placeholdr, Copyright (c) 2013 Shane Carr
// https://github.com/vote539/placeholdr
// X11 License
(function(b,c,e,d){var g=function(){var a=b(this);a[d]()||(a.addClass(c),"password"===a.attr("type")&&(a.attr("type","text"),a.data(c+"-pwd",!0)),a[d](a.attr(e)))},h=function(){var a=b(this);a.removeClass(c);a.data(c+"-pwd")&&a.attr("type","password");if(a[d]()===a.attr(e))a[d]("")},k=function(){b(this).find("["+e+"]").each(function(){b(this).data(c)&&h.call(this)})};b.fn.placeholdr=function(){if(e in document.createElement("input"))return this;b(this).find("["+e+"]").each(function(){var a=b(this);
a.data(c)||(a.data(c,!0),g.call(this),a.focus(h),a.blur(g))});b(this).find("form").each(function(){var a=b(this);a.data(c)||(a.data(c,!0),a.submit(k))});return this};b.fn[d]=b.fn.val;b.fn.val=function(a){var f=b(this);if("undefined"===b.type(a)&&f.data(c)&&f[d]()===f.attr(e))return"";(f="string"===b.type(a))&&h.call(this);var k=b.fn[d].apply(this,arguments);f&&!a&&g.call(this);return k};b(function(){b(document).placeholdr()});document.write("<style>.placeholdr{color:#AAA;}</style>")})(jQuery,"placeholdr",
"placeholder","placeholdrVal");