CSS-sprites: beschrijving, basistechnieken en nuttige aanbevelingen

Een moderne website moet snel, mooi eneffectief in zowel de ontwikkelingsfase als tijdens het werk met de klant. In de regel streeft elk bedrijf dat internetbronnen maakt ernaar om zijn eigen gezicht te hebben, bezoekers aan te trekken met zijn ontwerp, stijl, betrouwbaarheid, snelheid en andere kwaliteiten.

Nuttige eigenschappen van sprites

CSS-sprites kunnen als hoge kwaliteit verbeterenSitekenmerken en bedrijfsimago. In essentie is dit geen erg ingewikkeld ontwikkelaarstool, maar het versnelt echt het proces van het ontwikkelen van middelen en de snelheid van hun werk.

Onder andere de code is vereenvoudigd en, inIn bekende zin wordt het draagbaar voor andere bronnen, die, vanwege het feit dat CSS-sprites worden gebruikt, vergelijkbaar worden als naaste familieleden, omdat je dezelfde grafische ideeën, de ontwerpstijl van de dialoogelementen, de structuur en inhoud van tags kunt gebruiken.

In het gebruikelijke ontwikkelingsproces van de site is het noodzakelijkveel foto's maken. Heel vaak nemen deze afbeeldingen heel weinig ruimte in, maar zijn altijd een afzonderlijk bestand. Voor elk besturingssysteem van een server is het openen van een bestand een tijdrovende bewerking, maar het zal niet significant verschillen in de tijd wanneer een bestand wordt geopend met 13 bij 13 pixels en wanneer een bestand van 16 afbeeldingen van 52 bij 52 pixels wordt geopend. In het eerste geval is het noodzakelijk om 16 bestanden en 16 open / leesbewerkingen te hebben, in het tweede geval worden 16 foto's verkregen door slechts één bestand te openen.

Als u sets van dergelijke bestanden over het onderwerp maakt(horizontaal menu, dialoogformulieren, rekenmachineknoppen, kalenderontwerpelementen ...) dan kunnen dergelijke sets afbeeldingen van de ene site naar de andere worden overgedragen.

De achterkant van de medaille

Als er fans zijn die te snel aanbevelen om CSS-sprites te gebruiken, zijn er altijd mensen die het probleem zorgvuldig bestuderen en duidelijk laten zien dat het altijd praktischer is om op de ouderwetse manier te werken.

Inderdaad, als in plaats van 16 afbeeldingsbestandener zal één bestand zijn van 16 foto's, in plaats van 16 open / lees-operaties zal er één zijn. Maar de truc is dat elke browser een cache heeft en het laadt iets alleen als laatste redmiddel. Bovendien worden pagina-elementen meestal geladen wanneer u de pagina voor het eerst bezoekt en worden alleen gewijzigde pagina's achteraf geladen.

Een ander aspect. Meestal worden de afbeeldingen geknipt en niet in één bestand gelijmd. Op de een of andere manier heeft de technologie zich ontwikkeld en, beter gezegd, op maat gemaakt. De ontwerper maakt de lay-out en de lay-out gebruikt de stukken: fijn gesneden delen van de lay-out. Tegenstanders van sprites geloven dat het verzamelen van meerdere afbeeldingen in één bestand een moeizame taak is, waardoor de algehele tijd van pagina-ontwikkeling toeneemt.

Er zijn een aantal ontwikkelaars die rekening houden met het aantal HTTP-verzoeken en dit optimaliseren, in de overtuiging dat deze bezetting pragmatischer is dan CSS-sprites.

Al deze punten zijn ongetwijfeld van belang, maar de mening is veel belangrijker: alles moet binnen redelijke grenzen worden toegepast.

Automatisering en CSS Sprites

Als het geen zin heeft om de CSS-sprite-generator te gebruikenen neem het juiste deel van het ontwerp, dan voorkomt niets dat dit deel op de gebruikelijke manier wordt gemaakt. Als de gebruikelijke technologie leidt tot de noodzaak om honderden foto's te knippen, is het beter om een ​​JavaScript-functie te schetsen, die indien nodig het gewenste gebied uit de sprite selecteert en weergeeft.

Er moet echter worden opgemerkt dat de sprite uitTwee of drie elementen of een dozijn of twee - oké, maar als er honderden foto's in de sprite zitten, dan zijn er natuurlijk geen problemen met het schrijven van de JavaScript-functie, maar hoeveel werk zal er worden besteed aan het maken van zo'n grote sprite ... om afbeeldingen te lijmen is één ding, de CSS sprite-generator maakt zowel de juiste afbeelding, als de CSS-code ervoor, het maakt niet uit hoeveel samenstellende elementen van de sprite het is. Er ontstaan ​​problemen bij het aanpassen van de site, het wijzigen van het ontwerp, het verwijderen en toevoegen van nieuwe elementen. Wanneer u een sprite ontwikkelt, moet u niet nadenken over hoe u deze moet gebruiken, maar hoe u deze later kunt wijzigen.

Thematische voordelen van het gebruik van sprites

In tegenstelling tot CSS-programmeertaleneen relatief statische reeks regels, de volledige dynamiek ervan wordt bepaald door de regels en hun functionele inhoud (volgens de standaard). Gezien de complexe sprites, HTML en CSS, kunt u thematische bibliotheken van ontwerpfunctionaliteit maken.

Bijvoorbeeld de voltooide menuoptie: eenvoudig door verschillende css-regels, js-functies en verschillende HTML-div's in de code aan te sluiten, kunt u het resultaat krijgen. Door de inhoud van de sprite-afbeelding te wijzigen, kunt u de weergave van dit menu wijzigen. Door de hoofdtekst van de functie op te geven, kunt u de functionaliteit aanpassen.

Krijg een soort optieobject georiënteerd programmeren (OOP). Ongetwijfeld zal dit een slim idee zijn, maar het zal niet te opvallend klinken tegen andere OOP-dialecten in echte talen. Pas in de vroege jaren 90, toen de PLO nieuw leven werd ingeblazen en het ongewoon snel werd om de plaats onder de zon te veroveren, was het een concreet idee en een specifieke vorm van expressie, en vandaag hebben de ontwikkelaars zoveel dialecten bedacht als er geen diverse Russische taal is.

Speelgoed - de gouden onderkant voor sprites

Opwinding en programmering zijn incompatibele conceptenmaar de kwalificatie van een programmeur die games schrijft, verschilt merkbaar van algemeen dagelijks (eenvoudige codering) en creatief (ontwerp en ontwikkeling van nieuwe technologieën, ideeën).

Spelontwerp spreekt zo tot vectorafbeeldingen omdatde combinatie van SVG-sprites + CSS-regels wordt niet alleen geclaimd, maar verandert ook vaak van het object van een ontwikkelaar (site) in een echt spelobject. In het bijzonder past het populaire spel Counter Strike sprites toe op voorwaarden, sprays met vrij betekenisvolle synoniemen: explosie, bloed, zicht ...

De uitdrukking "installeer css v34 sprites" voorinitiëren is heel normaal en begrijpelijk. Sprites zijn niet alleen nuttig gebleken in hun toepassing, maar vormden ook een niche die volledig functioneel, toegankelijk en begrijpelijk is geworden voor een bepaalde kring van consumenten.

CSS Sprites: een voorbeeld

Om van pagina op een bepaalde taal te wisselen, worden verschillende opties gebruikt, maar als de taalselector als een pictogram wordt uitgevoerd, ziet de oplossing met de sprite er als volgt uit:

Duidelijke gebreken van sprites

Allereerst is het arbeidsintensief en nauwgezethet proces. Het is een ding om het ontwerp in kleine stukjes te knippen, en een ander om een ​​foto van een groot aantal kleintjes te verzamelen. Pas het idee van het canvas toe en doe er alle afbeeldingen op die op de site worden gebruikt, het is absoluut niet onaannemelijk.

Zelfs met behulp van de CSS-sprite-generator, moeilijkhedenkan niet worden vermeden, vooral wanneer u het ontwerp van de site opnieuw moet uitvoeren. Het plaatsen van enkele tientallen afbeeldingen in de sprite is geen reeks elementen, grafische afbeeldingen zijn afbeeldingen, ze worden meestal gewoon op het scherm weergegeven en worden niet in de code gezocht als een array op zoek naar het gewenste element.

De standaard en de volgende ontwikkelaars claimenomdat sprites gerelateerd zijn aan de achtergrondregel, is dit alleen een achtergrondafbeelding, geen site-element. De grafische component van de pagina-elementen moet img-tags manipuleren.

Het is moeilijk om hiermee in te stemmen op die simpele basis dat de achtergrond weinig als een algemene achtergrond werd beschouwd. Het is gewoon een achtergrond, ongeacht wat - een miniatuurelement of de hele pagina als geheel.

Ondertussen is het de grafische component die een ernstig obstakel vormt bij het gebruik van sprites.

Redelijk gebruik

Hoewel de termen "Internettechnologie"en "geavanceerde technologie" wordt als synoniem beschouwd, het is in feite tijdrovend en op sommige plaatsen zeer low-tech werk. Sprites onderscheiden zich niet bijzonder van andere knelpunten, zowel in pure programmering in JavaScript of PHP, en in termen van het ontwikkelen van de noodzakelijke functionaliteit, het opzetten van het proces van het vullen van sites met informatie, of, bijvoorbeeld, achtergrondarchiefkopieën.

Kracht en perspectiviteit van de gebruikte systemensitebeheer wordt soms genivelleerd door de nuances van hun praktische toepassing en handmatige ontwikkeling van bronnen maakt het in de regel noodzakelijk om 1001 keer een of ander eigen algoritme te herschrijven.

In het licht van het bovenstaande is het belangrijk om alleen redelijk te zijnlimieten om alles te gebruiken wat een moderne tool biedt. Wees niet te ijverig om het ene toe te passen ten koste van het andere, en de gouden regel in sitebouw zegt het volgende: je moet niet denken over hoe je het werk zo snel mogelijk moet overhandigen, maar hoe het uit te voeren zodat je in geval van een onvoorziene situatie snel kunt oplossen elk probleem.

</ p>>