CSS-Sprites: Beschreibung, grundlegende Techniken und nützliche Empfehlungen

Eine moderne Website sollte schnell, schön und gut seineffektiv sowohl in der Entwicklung als auch bei der Arbeit mit dem Kunden. In der Regel strebt jedes Unternehmen, das Internet-Ressourcen anlegt, nach einer eigenen Person, die durch Design, Stil, Zuverlässigkeit, Geschwindigkeit und andere Qualitäten Besucher anzieht.

Nützliche Eigenschaften von Sprites

CSS-Sprites ermöglichen es Ihnen, die Qualität zu verbessernMerkmale der Website und das Image des Unternehmens. Im Wesentlichen ist dies kein sehr komplexes Entwicklerwerkzeug, aber es beschleunigt den Prozess der Ressourcenentwicklung und die Geschwindigkeit ihrer Arbeit.

Unter anderem ist der Code vereinfacht und, inin gewissem Sinne portabel zu anderen Ressourcen, die sich dank der Verwendung von CSS-Sprites als enge Verwandte ähneln, weil man die gleichen grafischen Ideen, den Stil des Designs der Dialogelemente, die Struktur und den Inhalt der Tags verwenden kann.

Im normalen Prozess der Website-Entwicklung müssen Sieum viele Bilder zu machen. Sehr oft nehmen diese Bilder sehr wenig Platz ein, aber sie sind immer eine separate Datei. Für jedes Betriebssystem eines Servers ist das Öffnen einer Datei ein Vorgang, der viel Zeit in Anspruch nimmt, aber es wird sich nicht wesentlich unterscheiden, wenn eine Datei um 13 mal 13 Pixel geöffnet wird und wenn eine Datei mit 16 Bildern 52 mal 52 Pixel geöffnet wird. Im ersten Fall müssen Sie 16 Dateien und 16 Öffnen / Lesen-Operationen haben, im zweiten Fall erhalten Sie 16 Bilder, indem Sie nur eine Datei öffnen.

Wenn Sie Gruppen solcher Dateien nach Thema erstellen(das horizontale Menü, Dialogformen, Taschenrechnerknöpfe, Kalenderentwurfselemente ...) dann können solche Sätze Bilder von der Site zur Site übertragen werden.

Die Rückseite der Münze

Wenn es Fans gibt, die zu schnell CSS-Sprites empfehlen, sollten Sie diejenigen finden, die die Frage sorgfältig studieren und intelligent zeigen, dass es immer praktischer ist, auf die altmodische Art zu arbeiten.

Tatsächlich, wenn statt 16 Bilddateienes wird eine Datei mit 16 Bildern geben, dann wird es statt 16 Öffnungs- / Leseoperationen eins geben. Aber der Trick ist, dass jeder Browser einen Cache hat und nur als letzter Ausweg etwas lädt. Außerdem werden die Seitenelemente beim ersten Besuch der Seite normalerweise geladen, und nur die geänderten Elemente werden heruntergeladen.

Ein weiterer Aspekt. Normalerweise werden die Bilder geschnitten und nicht in eine Datei geklebt. Irgendwie hat sich die Technologie entwickelt, besser gesagt, der Brauch. Der Designer erstellt ein Layout, und Layout verwendet seine Stücke: fein gehackte Teile des Layouts. Gegner von Sprites glauben, dass die Sammlung mehrerer Bilder in einer Datei eine zeitaufwändige Aufgabe ist, die die gesamte Entwicklungszeit der Seite erhöht.

Es gibt auch Entwickler, die die Anzahl der HTTP-Anfragen berücksichtigen und optimieren, da sie glauben, dass diese Aktivität pragmatischer ist als CSS-Sprites.

Alle angegebenen Momente haben zweifellos Bedeutung, aber viel wichtiger ist die Meinung: Alles sollte in vernünftigen Grenzen angewendet werden.

Automatisierung und CSS-Sprites

Wenn es keinen Sinn macht, den CSS-Sprite-Generator auszuführenund den richtigen Teil des Designs zu bekommen, dann hindert nichts daran, diesen Teil auf die übliche Weise aufzuholen. Wenn die übliche Technologie dazu führt, dass Hunderte von Bildern geschnitten werden müssen, ist es vorzuziehen, eine JavaScript-Funktion zu skizzieren, die notwendigerweise den erforderlichen Bereich aus dem Sprite auswählt und anzeigt.

Es sollte jedoch beachtet werden, dass das Sprite auszwei oder drei Elemente oder ein Dutzend oder zwei - wo auch immer es hinging, aber wenn es einhundert Zeichnungen im Sprite gibt, dann wird es natürlich keine Probleme beim Schreiben der JavaScript-Funktion geben, aber wie viel Aufwand wird man brauchen, um einen so großen Sprite zu erstellen ... Bilder zu kleben ist eine Sache, der Sprite-Generator CSS macht sowohl das gewünschte Bild als auch den CSS-Code dafür, es ist ihm egal wie viele Elemente des Sprites sein werden. Probleme treten auf, wenn Sie die Website neu entwerfen, das Design ändern, löschen und neue Elemente hinzufügen. Wenn Sie ein Sprite entwickeln, sollten Sie nicht darüber nachdenken, wie Sie es verwenden, sondern wie Sie es später ändern können.

Thematische Vorteile der Verwendung von Sprites

Im Gegensatz zu den CSS-Programmiersprachen ist diesein relativ statisches Regelwerk, dessen ganze Dynamik durch die Regeln und deren funktionalen Inhalt bestimmt wird (nach dem Standard). In einer Reihe von Sprites, HTML, CSS, können Sie thematische Bibliotheken von Design-Funktional erstellen.

Zum Beispiel die fertige Version des Menüs: nur indem Sie ein paar CSS-Regeln, JS-Funktionen und einige HTML-Divs im Code verbinden, können Sie das Ergebnis erhalten. Indem Sie den Inhalt des Bild-Sprites ändern, können Sie die Darstellung dieses Menüs ändern. Durch Angabe des Funktionskörpers können Sie das Funktionale anpassen.

Holen Sie sich eine Originalversionobjektorientierte Programmierung (OOP). Sicher, es wäre eine gute Idee sein, aber es wird nicht zu hell sein, steht vor dem Hintergrund anderer OOP-Sprachen, Dialekte real. Es ist nur in den frühen 90er Jahren, als die PLO wurde wiederbelebt und wurde ungewöhnlich schnell einen Platz in der Sonne gewinnen, es ist eine bestimmte Idee und eine konkrete Form des Ausdrucks, aber jetzt haben die Entwickler mit so viele Dialekten kommen, da es diversen Russ hat.

Spielzeug - eine Goldmine für Sprites

Spannung und Programmierung sind inkompatible Konzepte,aber die Qualifizierung des Programmierers beim Schreiben von Spielen unterscheidet sich merklich von der üblichen (einfache Codierung) und kreativen (Design und Entwicklung neuer Technologien, Ideen).

Das Spieldesign spricht Vektorgrafiken an, weilDie Kombination von SVG-Sprite + CSS-Regeln ist nicht nur gefragt, sondern verwandelt sich oft von einem Entwicklerobjekt (Site) in ein Objekt eines realen Spiels. Insbesondere das beliebte Spiel Counter Strike gilt für Begriffe von Sprites, Sprays sind durchaus sinnvolle Synonyme: Explosion, Blut, Sehkraft ...

Der Ausdruck "install sprites css v34" fürengagiert ist ganz normal und verständlich. Sprites gewannen nicht nur in ihrem Wesen Sinn in der Anwendung, sondern bildeten auch eine Nische, die für einen bestimmten Verbraucherkreis voll funktionsfähig, zugänglich und verständlich wurde.

CSS-Sprites: ein Beispiel

Um Seiten einer Site in die eine oder andere Sprache zu wechseln, werden verschiedene Optionen verwendet. Wenn die Sprachauswahl jedoch in Form eines Symbols ausgeführt wird, sieht die Lösung mit dem Sprite möglicherweise so aus:

Offensichtliche Nachteile von Sprites

Vor allem ist es arbeitsintensiv und gewissenhaftProzess. Es ist eine Sache, ein Design in kleine Stücke zu schneiden, das andere ist, ein Bild von vielen kleinen zu sammeln. Wenden Sie die Idee der Leinwand an und legen Sie alle Bilder, die auf der Website verwendet werden, völlig vergeblich auf.

Selbst mit einem CSS Sprite Generator, Schwierigkeitennicht zu vermeiden, besonders wenn Sie das Design der Website neu gestalten müssen. Legen Sie ein paar Dutzend Bilder in das Sprite - das ist kein Array von Elementen, Grafiken sind Grafiken, es wird normalerweise einfach auf dem Bildschirm angezeigt und nicht im Code als Array nach dem gewünschten Element sortiert.

Der Standard und die folgenden Entwickler genehmigenDa die Sprites mit dem Hintergrund der Regel in Beziehung stehen, ist dies ein ausschließliches Hintergrundbild und kein Element der Site. Die Grafikkomponente der Seitenelemente sollte die Img-Tags manipulieren.

Damit ist es schwierig, sich auf die einfache Grundlage zu einigen, dass der Hintergrund nicht als allgemeiner Hintergrund wahrgenommen wurde. Es ist nur ein Hintergrund, egal was - ein Miniaturelement oder die gesamte Seite als Ganzes.

Indessen ist es die grafische Komponente, die ein ernsthaftes Hindernis bei der Verwendung von Sprites darstellt.

Angemessener Gebrauch

Trotz der Tatsache, dass die Begriffe "Internet-Technologie"und "Hochtechnologie" wird normalerweise synonym betrachtet, tatsächlich ist es arbeitsintensiv und an manchen Stellen sehr nicht-technologische Arbeit. Sprites heben sich nicht besonders von anderen Engpässen ab, wie der reinen Programmierung in JavaScript oder PHP oder der Entwicklung der notwendigen Funktionalität, dem Einrichten von Prozessen zum Füllen von Websites mit Informationen oder zum Beispiel dem Erstellen von Hintergrundkopien von Archiven.

Die Kraft und die Perspektiven der verwendeten SystemeDas Management von Websites wird manchmal durch die Nuancen ihrer praktischen Anwendung geebnet, und die manuelle Entwicklung von Ressourcen führt in der Regel dazu, dass der eine oder andere seiner eigenen Algorithmen zum hundertsten Mal neu geschrieben werden muss.

Im Zusammenhang mit dem, was gesagt wird, ist es wichtig, einfach in vernünftigenGrenzen, alles zu verwenden, was ein modernes Werkzeug bietet. Seien Sie nicht zu eifrig einen über den anderen zu verwenden, und die goldene Regel in site Gebäude lautet wie folgt: Sie nicht darüber, wie Sie denken müssen, die Arbeit so schnell wie möglich passieren, und wie sie ausgeführt werden, so dass im Falle einer unvorhergesehenen Situation schnell gelöst werden kann irgendein Problem.

</ p>>