5 obskure JavaScript-Bibliotheken, die das Webdesign vereinfachen

In dieser Zusammenfassung werfen wir einen Blick auf 5 JavaScript-Bibliotheken, die die Entwicklung moderner, attraktiver Websites wirklich vereinfachen können. Die Bibliotheken, die wir besprechen werden, unterscheiden sich von Bibliotheken wie jQuery oder YUI. Sie sind kleiner und spezialisierter. Aber sie sind die Besten auf ihrem Gebiet und bieten einzigartige Funktionen.

---

1. Verwenden Sie DD_BelatedPNG, um PNG in IE6 zu reparieren

• Erstellt von: Drew Diller
• Lizenz: MIT
• Zweck: Alpha-transparentes PNG in IE6 reparieren
• Größe: 6,86 KB (komprimiert)
• Kompatibilität: nur IE6
• Demo ansehen
• Herunterladen

DD_belatedPNG wurde ausschließlich zu dem Zweck erstellt, die Verwendung von alpha-transparenten PNGs in IE6 zu ermöglichen, ohne auf den proprietären AlphaImageLoader Filter von Microsoft zurückzugreifen. Jeder, der versucht hat, PNGs in IE6 zu verwenden, weiß, dass sie zwar in einem sehr einfachen Ausmaß funktionieren, Dinge wie sich wiederholende Hintergrundbilder jedoch nicht in Frage kommen.

Die Verwendung des AlphaImageLoader-Filters löst nur die Hälfte der PNG-Probleme im IE6, da er nur mit Hintergrundbildern funktioniert. Um dabei zu sein

Die Bibliothek verfügt über eine Methode, fix, die einen einfachen CSS-Selektor für das Bibliotheksziel bereitstellt, alles mit einem PNG-src-Attribut

---

2.Verwenden Sie eine beliebige Schriftart mit Cufon

• Erstellt von Simo Kinnunen
• Lizenz: MIT
• Zweck: Nicht standardmäßige Schriftarten ohne Flash einbetten
• Größe: 17,8 KB (komprimiert)
• Kompatibilität: Alle (alle gängigen Versionen aller gängigen Anbieter, einschließlich IE6)
• Demo ansehen
• Herunterladen

Typografie ist ein Bereich der Webentwicklung, der im Vergleich zu anderen Bereichen der Branche nur minimale Fortschritte gemacht hat. Webentwickler sind gezwungen, sich auf einen kleinen Satz „websicherer“ Schriftarten zu verlassen, die wahrscheinlich auf den Computern der meisten ihrer Besucher installiert sind. Es sind bild- und flashbasierte Lösungen entstanden, die beide Nachteile in der Anwendung haben.

Cufon bietet Entwicklern eine leistungsstarke und schnelle Lösung, die mithilfe der integrierten Funktionalität des Browsers im Browser angezeigt werden kann, ohne dass Plug-Ins von Drittanbietern erforderlich sind. Cufon-Schriftarten können als VML in nativen IE-Implementierungen oder als -Elemente in anderen leistungsfähigeren Browsern verwendet werden. Erstaunlicherweise können wir mit reinem CSS auch verschiedene Stile für den Ersetzungstext festlegen, etwa Farbe und Größe.

---

Verwendung

Diese Bibliothek unterscheidet sich von anderen dadurch, dass vor der Verwendung eine gewisse Vorbereitung erforderlich ist; eine neue Schriftartendatei muss generiert werden, was einfach über die cufon-Website erfolgen kann. Eine SVG-Schriftart wird generiert und in einer JS-Datei gespeichert. Diese Datei muss dann mit allen anderen <script> Ressourcen nach der cufon-Kerndatei verknüpft werden: </script>

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="Breip_500.font.js"></script>

Hier geht es also nur darum, Cufon mitzuteilen, welche Elemente ersetzt werden sollen:

<script type="text/javascript">
  Cufon.replace('h1.replacedFont');
</script>

Diese API bietet weitere Lösungen zur Verwendung mehrerer Schriftarten auf derselben Seite und zur Verbesserung der IE-Leistung. Obwohl ich diesen Abschnitt als „Beliebige Schriftart verwenden“ bezeichne, sollten Sie bedenken, dass Sie nur Schriftarten verwenden sollten, die zum Einbetten lizenziert sind. Der Screenshot unten zeigt den ersetzten Titel:

---

3.Verwenden Sie Firebug in einem beliebigen Browser

• Erstellt von: Mike Ratcliffe
• Lizenz: BSD-Stil
• Verwendung: Nutzen Sie alle Funktionen von Firebug in anderen Browsern als Firefox
• Größe: 76,9 KB (komprimiert)
• Kompatibilität: Alle Nicht-Firefox-Browser
• Demo ansehen
• Herunterladen

Firebug ist zweifellos eines der größten Hilfsmittel für die Webentwicklung. Ich verwende es natürlich jeden Tag bei der Webentwicklung und ich weiß, dass es auch für viele andere das Plugin der Wahl ist. Ein unglücklicher Nebeneffekt der überlegenen Leistung von Firebug ist, dass es im Vergleich zu ähnlichen Tools in anderen Browsern verblasst. Beispielsweise kann die Behebung von Layoutproblemen und CSS-Fehlern im IE eine sinnlose Übung sein.

Hier kommt Firebug Lite ins Spiel; es handelt sich um eine einfache JavaScript-Bibliothek, die die meisten Schlüsselfunktionen der Firebug-Schnittstelle nachbildet und unseren bevorzugten Debugger auf alle anderen Plattformen bringt. Das Korrigieren von Layouts und das Beheben von browserübergreifenden Problemen ist wieder einfach.

Einer der größten Vorteile von Firebug Lite besteht darin, dass Sie nichts herunterladen oder installieren müssen, um es zu verwenden. Wenn Sie die Seite, an der Sie arbeiten, in einem Nicht-Firefox-Browser debuggen möchten, fügen Sie einfach ein SRC-Skript hinzu Datei, die auf die Online-Version verweist. Kann:

<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

Das ist alles, Firebug Lite wird auf der Seite angezeigt, wenn Sie es in einem anderen Browser ausführen. Für die Offline-Nutzung kann die Skriptdatei zusammen mit der CSS-Datei heruntergeladen werden und sollte wie jede andere JS- oder CSS-Datei verwendet werden. Der folgende Screenshot zeigt Firebug Lite in Safari:

---

4. 使用 Raphael JS 渲染交互式 3D 形状

• 创建者：德米特里·巴拉诺夫斯基
• 许可：麻省理工学院
• 用途：在页面上绘制 SVG 形状
• 大小：58.4kb（压缩后）
• 兼容性：全部（来自所有常见供应商的所有常见版本，包括 IE6）
• View Demo
• 下载

好吧，这个库并不是那么小，但这是有原因的；该库可以做很多事情，并向网页添加完整的 SVG 控制。说实话，它的威力是非常强大的。想象一下能够在网页上绘制平滑的曲线并动态创建自定义形状 - 拉斐尔做到了。

您可以制作完全跨浏览器的圆角，没有图像（除了库实际绘制的图像之外），您可以为任何图像创建褪色反射，动态旋转图像等等。由于所有路径都是使用 SVG 元素绘制的，因此您可以将 JavaScript 事件附加到它们，以便人们可以在鼠标悬停或单击（或任何其他 JS 事件）时与图像进行交互。可能性是无限的，API 提供了多种不同的方法，使使用该库成为一种乐趣。

---

用法

该库当然必须链接到：

<script type="text/javascript" src="raphael.js"/>

就是这样，没有其他依赖项。现在我们可以开始创建 SVG 形状：

<script type="text/javascript">
  var canvas = Raphael(50, 50, 620, 100);
  var shape = canvas.rect(0, 0, 500, 100, 10);
  shape.attr("fill", "#fff");
  canvas.text(250, 50, "Using Raphael to create custom shapes\ndrawn on the fly is extremely easy").attr("font", "20px 'Arial'");
 </script>

该库易于使用，在本示例中我们仅使用了其功能的一小部分。使用此功能的页面应如下所示：

---

5.使用 Modernizr 逐步增强您的网站，迎接未来

• 创建者：Faruk Ateş 和 Paul Irish。
• 许可：麻省理工学院
• 用途：检测 HTML5 和 CSS3 支持
• 大小：7kb（压缩后）
• 兼容性：全部
• View Demo
• 下载

对于 CSS3 和 HTML5 日益进步的 Web 开发来说，这是一个令人兴奋的时刻，但这也是一个令人沮丧的时刻，因为我们在推出所有这些先进的新技术时却很少得到支持。我们希望开始使用所有出色的新 HTML5 和 CSS3 功能，但大多数新 HTML5 元素可能仅在单个浏览器中受支持。

Modernizr 是一个很小的库，它只是测试当前环境是否支持一系列高级功能，例如新的

该库还将类名添加到我们可以使用 CSS 定位的 元素中，以便在页面中隐藏某些元素，因此当支持

这是令人难以置信的，因为这意味着我们可以安全地将这些新功能添加到支持它们的浏览器的页面中，而不会在不支持它们的浏览器中造成混乱。在渐进增强的本质中，我们可以创建一个可访问且广泛支持的内容核心，然后逐步为支持它们的浏览器添加越来越多的功能。

---

用法

让我们看看它如何显示一些漂亮的 CSS3 效果；首先，我们使用标准 <script> 元素链接到非常小的库：</script>

<script type="text/javascript" src="modernizr-1.0.min.js"></script>

然后我们可以添加以下CSS：

.no-audio #audioContainer { display:none; }

这将确保不支持

<div id="audioContainer">
      <audio id="audio" src="https://www.php.cn/link/acb55f9af76808c5fd5522dcdb519fde" controls"true"></audio>
 </div>
<a id="linkToAudio" href="https://www.php.cn/link/acb55f9af76808c5fd5522dcdb519fde">Link to the audio</a>

完成此操作后，我们可以检测浏览器是否支持 HTML5 音频并显示或隐藏媒体链接（我们可以仅使用 CSS 轻松完成此操作，但这样我们就可以看到正在运行的 Modernizr 对象）：

if (Modernizr.audio) {
  var audioLink = document.getElementById("linkToAudio");
  audioLink.style.display = "none";
}

这就是我们所需要的；有能力的浏览器将看到

---

结论

这些库中的每一个都解决一个非常具体的问题；它们通常比更知名的通用库小得多，但对于其特殊用途同样有用。它们中的每一个都可以以某种方式帮助我们开发网站，从简化 IE6 中的开发、使用非标准字体而不需要繁琐的替换技术，到检测对最新 CSS3 和 HTML5 技术的支持或生成复杂的交互式图像。

Das obige ist der detaillierte Inhalt von5 obskure JavaScript-Bibliotheken, die das Webdesign vereinfachen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!