Zavart vagyok, mi a különbség Fokozatos növekedés és Kecses degradáció... Számomra úgy tűnik, hogy ugyanazok a dolgok.
el tudná magyarázni nekem a kettő közötti különbséget, és milyen helyzetben használnám az egyiket a másik felett?
8 válasz
Nagyjából egyformák, de összefüggésben különböznek egymástól.
van egy böngészőosztály, az úgynevezett "A osztályú böngészők". Ezek a tipikus közönségtagok, akik (valószínűleg) a látogatók többségét alkotják. Ezeknek a felhasználóknak az alapszintjén fog kezdeni. Nevezzük legjobb modern gyakorlatok.
Ha akarod a nagyításhoz bárki számára, aki véletlenül használja az FF3.6-ot vagy a Safari 4-et, vagy más whizbang éjszakai webkit fejlesztőt, bármi olyan csodálatos dolgot szeretne csinálni, mint például
- lekerekített sarkok css-n keresztül
- árnyékolt szöveg (de kérem Istenem, ne túl sokat)
- árnyékolás (lásd zárójelben fent)
Ettől a webhelyed rúgós lesz, de nem fogja megtörni. azt fokozatos növekedés... A jövő átfogása a legjobb gyakorlatok.
másrészről, a Nicho résszel rendelkező webhelye elég sok IE5 felhasználót vonz. Szegény, de azt is meg akarja győződni, hogy folyamatosan visszatérnek-e. Alternatív megoldást kínálhat az ajax viselkedésének azáltal, hogy az ajax parancsfájlt egy külső fájlba foglalja, és ha a JS-t nem tartalmazza, a linkek frissíthetik az egész oldalt. Stb. Szempontból legjobb modern gyakorlatok, meg fogja győződni arról, hogy néhány történelmi piacot kiszolgálnak funkcionális hely némi látszata... azt kecses degradáció.
Többnyire azonosak, de sok fejlesztői csapat prioritása tekintetében különböznek egymástól: a PE nagyon szép, ha van időd, de a GD gyakran szükséges
Ha webhelye minden böngészőben egyformán jól mutat, de egyes böngészők mondjuk azért kapnak táncpónikat, mert támogatják a táncpónikat, akkor ez fokozatos fejlődés. Minden böngészőben működik, de egyes böngészők kapnak valami pluszt. Általában ez a kifejezés bizonyos Javascript-funkciókra vonatkozik, amelyek javíthatják a "nyers HTML" -n kívüli használhatóságot.
Ha webhelye csak a böngészőkben néz ki úgy, ahogyan azt teljes egészében támogatja, például a CSS3-at és az IE8-at - ugyanazt az oldalt rendereli, mondjuk lekerekített sarkok nélkül, akkor ez kecses lebontás. A webhely valóban a modern böngészők számára készült, de a régebbi böngészőkben még mindig használják, csak nem annyira divatosak.
végül is valóban ugyanaz a dolog, két különböző nézőpontból nézve.
irány a kiválasztottól bázis mert minden fogalom más és más.
a kecses lebontás a felhasználói élmény ideális szintjén kezdődik, és a felhasználói ügynök képességeitől függően minimálisra csökken, olyan ügynököket kiszolgálva, amelyek nem támogatják az alapvonal által használt bizonyos funkciókat.
a fokozatos fejlesztés a fogyasztó széles minimális tapasztalatánál kezdődik, és a fogyasztó ügynökének képességeitől függően képesebb szintre emelkedik, táplálékot biztosítva az alapszintűnél fejlettebb funkciókat támogató szereknek.
Szerintem mindkét fogalmat használni lehet, ha az idő / költségvetés engedi. Ha nem, akkor a kecses lebontást részesítik előnyben.
Sajnálom, hogy feltámasztottam valamit, ami több mint egy éves, de úgy érezte, hogy valamilyen módon hozzájárulhatok a saját véleményemhez az ügyben.
bár egyetértek Alex Mcp-val és bizonyos szempontból visszautasítom, a kecses degradáció és a fokozatos javulás kifejezéseknek kissé más jelentése van, mint amiben állok.
kecses degradációk, sok idő (véleményem szerint), inkább botnak tűnik az alkalmazás megverése a nézetben, miután tapasztalataim szerint először rosszul építették fel. Hogyan készít valaki valamilyen hatalmas javascript objektumot, amely a felhasználó számára valami igazán jó játékot kínál, amíg a menedzser be nem jön, ellenőrzi a dolgot, és mindenki sikoltozva fut, kezet vetve, amikor arra figyel, hogy az alkalmazása nem működik a böngészők 35% -ában. - Valaki jobban szolgáltat erre tartalékot.
Fokozatos növekedés bár (és ez is olyan jó kifejezés mondani) inkább úgy tűnik, hogy olyat készítünk, ami csak működik, belépőszinten, mindenhol, a rendelkezésre álló legalapvetőbb módszerek felhasználásával, a felhasználó által kívánt funkciók biztosítása érdekében. Ez aztán hozzáadható ügyes kis, nem feltűnő segítőkhöz, stílushoz stb. Valójában javítja a szóban forgó alkalmazás felhasználói élményét, és nem csak alig használhatóvá teszi. "ami nagyon jónak tűnik. IE6-ban működik. Ó, igen."
Úgy gondolom, hogy ha a stílust példaként említem a két legfontosabb válasz mindkét kifejezéséről, elmulasztja a valódi alapvető használhatósági kérdést fokozatos növekedés gyakran természeténél fogva eldönti, hogy hol kecses degradációk figyelmen kívül hagyja, amíg a dolgok rosszra fordulnak.
A tirádának vége ...
a kecses lebontás az a gyakorlat, hogy webfunkciókat hoznak létre, hogy bizonyos szintű felhasználói élményt nyújtsanak a modernebb böngészőkben, de a régebbi böngészőkben is kecsesen degradálódik alacsonyabb felhasználói szintre. Ez az alsó réteg nem annyira élvezetes a webhely látogatói számára, de még mindig biztosítja számukra azokat az alapvető funkciókat, amelyek használatához az Ön webhelyére érkeztek; a dolgok nem szakadnak meg nekik.
a progresszív emelkedés hasonló, de az ellenkezője igaz. Először egy olyan alapszintű felhasználói élmény kialakításával kezdi meg, amelyet minden böngésző tud nyújtani a webhely megjelenítésekor, de létrehoz egy olyan fejlettebb funkciót is, amelyek automatikusan elérhetők lesznek az azt használó böngészők számára.
más szavakkal, a kecses degradáció a komplexitás jelenlegi helyzetével kezdődik, és megpróbál kijavítani kevesebb tapasztalat érdekében, míg a fokozatos javulás egy nagyon alapvető, működő példával kezdődik, és lehetővé teszi a jövőbeni környezetek folyamatos terjeszkedését. Kecsesen megalázni azt jelenti, hogy hátranézünk, míg a fokozatosan növekedni azt jelenti, hogy előre tekintünk, miközben a lábunk szilárd talajon marad.
Kecses degradáció
kecses degradációk egy számítógép, gép, elektronikus rendszer vagy hálózat képessége a korlátozott funkcionalitás fenntartására akkor is, ha annak nagy része megsemmisül vagy le van tiltva. A kecses degradáció célja a katasztrofális kudarc megelőzése.
a kecses degradáció az egyik megoldás. Ez egy weboldal vagy alkalmazás készítésének gyakorlata, így jó szintű felhasználói élményt nyújt a modern böngészőkben. Ez azonban kecsesen romlik a régebbi böngészőkben. Lehet, hogy a rendszer nem olyan szép vagy szép, de az alapfunkciók működni fognak a régebbi rendszereken.
egyszerű példa a 24 bites Alpha átlátszó PNG-k használata. Ezek a képek problémamentesen megjeleníthetők a modern böngészőkben. Az IE5.5 és az IE6 megmutatja a képet, de az átlátszósági effektusok nem fognak működni (szükség esetén működőképessé tehető). Azok a régebbi böngészők, amelyek nem támogatják a PNG-t, alternatív szöveget vagy szóközt mutatnak.
a kecses lebontást elfogadó fejlesztők gyakran jelzik böngészőjük támogatási szintjét, például 1-es szintű böngészők (legjobb élmény) és 2-es szintű böngészők (alacsony szintű tapasztalatok).
Fokozatos növekedés
fokozatos növekedés egy webtervezési stratégia, amely hangsúlyozza az akadálymentességet, a szemantikus HTML jelöléseket és a külső stíluslapokat és a szkriptelési technológiákat. A Progressive Enhancement a webes technológiákat réteges módban használja, amely lehetővé teszi mindenki számára, hogy bármilyen böngésző vagy internetkapcsolat használatával hozzáférjen a weboldal alapvető tartalmához és funkcionalitásához, és az oldal továbbfejlesztett verzióit kínálja azoknak, akik fejlettebb böngészős szoftverrel vagy nagyobb sávszélességgel rendelkeznek.
a fokozatos javulás hasonló a kecses romlás fogalmához, de fordítva. A webhely vagy az alkalmazás alapszintű felhasználói élményt nyújt a legtöbb böngésző számára. Fejlettebb funkciók kerülnek hozzáadásra, amikor a böngésző támogatja.
a progresszív fejlesztés nem igényli a támogatott böngészők kiválasztását vagy a táblázatos elrendezés használatát. A technológiai szintet választjuk, vagyis a böngészőnek támogatnia kell a HTML 4.01-et és a szokásos oldalkéréseket / válaszokat.
visszatérve a példaképünkhöz, eldönthetjük, hogy alkalmazásunknak minden grafikus böngészőben működnie kell. Alapértelmezés szerint alacsonyabb minőségű GIF-képeket használhatunk, de cserélhetjük őket 24 bites PNG-kre, ha a böngésző támogatja őket.
linkek
Wikipédia: Fokozatos növekedés és
Tartalomjegyzék:A -webkit- előtag annyira domináns a CSS-ben, hogy némelyik oldal nem működik megfelelően. Ez azt jelzi, hogy a fejlesztők az elmúlt években nem követték a legjobb gyakorlatokat, és ez egy sajnálatos, de szinte kényszerű döntéshez vezetett a Mozilla részéről. A Firefox 46-os vagy 47-es verziójában (ez 2016. április vagy május) a Mozilla a nem szabványos -webkit- előtagok támogatását tervezi megvalósítani, hogy javítsa a Firefox kompatibilitását azokkal a webhelyekkel, amelyek nagymértékben használják a -webkit (általában mobil webhelyeket).
A fejlesztők azonban az előtagokat használják, hogy a lehető leghamarabb kihasználják a legújabb böngésző képességeit. Az előtagok zavart keltettek a WebKit dominanciájával, de gyorsított ütemben előre is tették az internetet.
A Mozilla és a Microsoft megközelítése biztonságos a legtöbb webhely számára. Sok webhely használja a -moz- előtagot, vagy nem kell semmit tennie ahhoz, hogy kompatibilis legyen egy jövőbeli Firefox-frissítéssel. De profi webfejlesztőként gondosan meg kell fontolnunk és meg kell értenünk ennek következményeit. Biztosan tudja, melyik webhelyet érinti ez a frissítés.
Ideje tehát újragondolni az előtagok megközelítését és a velük való tesztelési helyeket.
Támogatott előtagok
Számos -webkit- előtag létezik, amelyeket a Mozilla képes megvalósítani. Az összegyűjtött adatok alapján a Mozilla nem törekszik a támogatott előtagtulajdonságok listájának összehangolására az Edge tulajdonságok listájával, mivel nem mindegyikre van szükség az elrendezőmotor kompatibilitásához.
A Firefox fejlesztői szintén közel állnak hasonló megközelítéshez:
A Mozilla jelenlegi trendje az, hogy kerülje a gyártói előtagokat azáltal, hogy letiltja a polcon elérhető tulajdonságokat, és ha nem elég stabil, akkor használjon nem előtagú verziót. Ez általános politika: bizonyos esetekben kivételek lehetségesek - Boris a Mozillától
A Microsoft Edge el fogja dobni a szállító előtagjait is:
„A Microsoft arra is törekszik, hogy a szállító előtagokat dobja be az Edge-be. Ez azt jelenti, hogy a HTML és a CSS sajátosságait használni kívánó fejlesztők nem fogják használni az Edge adott előtagját. Ehelyett csak a szabványoknak megfelelő kódot írnak. ”- Mashable
Nem lesz több fokozatos degradáció az előtagok alapján
Ez a szállító előtagoktól való eltávolodás egy dolgot jelent - a szállító előtagokkal történő fokozatos lebontásnak nincs kilátása.
A szállítói előtagok használata a stílusok alkalmazásához egy adott böngészőhöz (például csak a Chrome-hoz) nem volt bevezetésük célja; A fejlesztőknek mindig az összes előtag (-webkit- to -o-) használata ajánlott. Ha olyan funkciókat használ, amelyek előhívott tulajdonságokra támaszkodnak, és az előtagok segítségével fokozatosan rontják a dizájnt más böngészőkben, akkor ez már nem működik.
Következtetés
Az idők változnak. A WebKit dominanciája akaratlanul is inkompatibilitási problémákhoz vezetett, és más böngészőgyártókat kényszerítette az -webkit- előtagok implementálására. Ez a probléma kimerül, mivel a böngészőgyártók eltávolodnak a szállító előtagjaitól, de a fejlesztőknek egyelőre meg kell győződniük arról, hogy az előtagok nem okoznak-e váratlan eredményt a nem WebKit böngészőkben.
A web design ipar folyamatosan változik, részben azért, mert a webböngészők és az eszközök folyamatosan változnak. Mivel a webtervezőként és fejlesztőként végzett munkákat webböngészőn keresztül tekintjük meg, munkánk mindig szimbiotikus kapcsolatban áll ezzel a szoftverrel.
A webböngészők változásai
Az egyik kihívás, amellyel a weboldalak tervezői és fejlesztői mindig szembesültek, nem csak a webböngészőkben bekövetkezett változások, hanem a különböző webböngészők köre, amelyeket a webhelyeik elérésére használnak. Nagyon jó lenne, ha a webhely minden látogatója a legfrissebb és legnagyszerűbb szoftvert használná, de ez soha nem volt így (és valószínűleg soha nem is fog).
Egyes webhelye látogatói nagyon elavult böngészőkkel és a modernebb böngészőkből hiányzó funkciókkal böngésznek. Például a Microsoft Internet Explorer böngésző régebbi verziói sok internetes szakember számára régóta problémát jelentenek. Annak ellenére, hogy a vállalat elvetette néhány legrégebbi böngészője támogatását, még mindig vannak olyan emberek, akik használni fogják őket - olyanokkal, akikkel érdemes foglalkozni és kommunikálni.
A "kecses degradáció" meghatározása
A valóság az, hogy azok az emberek, akik ezeket az elavult webböngészőket használják, gyakran nem is tudják, hogy elavult szoftvereik vannak, vagy hogy a szoftver választásuk miatt veszélybe kerülhet az internetes élményük. Számukra ez az elavult böngésző egyszerűen az, amit régóta használnak a weboldalak elérésére. Webfejlesztői szempontból szeretnénk megbizonyosodni arról, hogy jutalmazó élményt tudunk nyújtani ezeknek az ügyfeleknek, valamint olyan weboldalakat hozhatunk létre, amelyek kiválóan működnek a ma elérhető modernebb, funkciókban gazdag böngészőkben és eszközökben.
A "kecses lebontás" egy stratégia a különböző böngészők, mind a régi, mind az új böngészők számára.
A modern böngészőkkel kezdve
A fokozatos degradációra épített weboldaltervezést elsősorban a modern böngészők szem előtt tartásával fejlesztik ki. Ezt a weboldalt úgy tervezték, hogy kihasználja ezen modern böngészők képességeit, amelyek közül sokakat „automatikusan frissítenek”, így az emberek mindig a legújabb verziót használják. A kecsesen romló weboldalak azonban hatékonyan működnek a régebbi böngészőknél is. Amikor ezek a régebbi, kevésbé funkcionális böngészők megnézik a webhelyet, akkor annak le kell romlania, miközben még működik, de talán kevesebb funkcióval vagy más vizuális megjelenítő elemekkel rendelkezik. Bár ez a kevésbé funkcionális vagy nem túl vonzó webhely biztosításának fogalma furcsának tűnhet az Ön számára, az az igazság, hogy az emberek nem is fogják tudni, hogy hiányoznak. Nem fogják összehasonlítani a látott oldalt a "legjobb verzióval", így mindaddig, amíg a webhely azt csinál, amit akar, és nem tűnik funkcionálisan vagy vizuálisan sérültnek, addig jó állapotban leszel.
Fokozatos javulás
A fokozatos leépülés fogalma sokban hasonlít egy másik webtervezési koncepcióhoz, amelyről már hallottál - fokozatos fejlesztés. A degradációs stratégia és a progresszív fejlesztési stratégia közötti fő különbség ott van, ahol elkezdi a tervezését. Ha a legalacsonyabb közös nevezővel kezdi, majd modernebb böngészőfunkciókat ad hozzá weboldalaihoz, akkor fokozatos javítást használ. Ha a legmodernebb, legmodernebb funkciókkal kezdi, majd kicsinyíti, akkor fokozatos lebontást alkalmaz. Végül a létrejövő webhely valószínűleg ugyanazt az élményt nyújtja, függetlenül attól, hogy Ön fokozatos javítást vagy fokozatos romlást használ. Valójában mindkét megközelítés lényege egy olyan webhely létrehozása, amely kiválóan működik a modern böngészők számára, ugyanakkor felhasználóbarát élményt nyújt az idősebb böngészők és az őket továbbra is használó kliensek számára.
A kecses lebontás nem azt jelenti, hogy azt mondod olvasóidnak: "Töltsd le a legújabb böngészőt".
Az egyik oka annak, hogy sok modern tervező nem kedveli a kecses degradációs megközelítést, az az oka, hogy gyakran azt követeli meg, hogy az olvasók az oldal működéséhez a legmodernebb böngészőt töltsék be. Ez nem kecses degradáció. Ha azt akarja írni, hogy „betölti az X böngészőt, hogy ez a funkció működjön”, akkor hagyja el a fokozatos leépülés területét, és folytassa a böngészőközpontú tervezéssel. Igen, kétségtelenül hasznos, ha segítünk egy webhely látogatót jobb böngészőre váltani, de ezt gyakran megkérdezik (ne feledje, sokan nem értik az új böngészők letöltését, és az Ön erre irányuló kérése egyenesen ijesztő lehet). őket el). Ha valóban azt akarja, hogy a vállalkozásuk mondja meg nekik, mondják meg nekik, hogy jobb szoftver letöltéséhez hagyják el az Ön webhelyét, ez nem valószínű. Ha webhelye nem rendelkezik olyan alapvető funkciókkal, amelyek egy adott vagy újabb böngészőverziót igényelnek, a kényszerű letöltések gyakran sértik a felhasználói élményt, és kerülni kell őket.
Jó ökölszabály, hogy a fokozatos romláshoz ugyanazokat a szabályokat kell betartani, mint a fokozatos javuláshoz:
- Írjon érvényes HTML szabványoknak megfelelő
- Használjon külső stíluslapokat a tervezéshez és az elrendezéshez
- Használjon kívülről kapcsolt szkripteket az interaktivitáshoz
- Győződjön meg arról, hogy a tartalom még alacsony szintű böngészők számára is hozzáférhető CSS vagy JavaScript nélkül
Ezt a folyamatot szem előtt tartva kimenhet és elkészítheti a lehető legmodernebb dizájnt! Csak győződjön meg róla, hogy kevésbé működő böngészőkben működik, miközben még mindig dolgozik.
Mennyire kell visszamennie?
Számos webfejlesztőnek feltett kérdése az, hogy mennyire támogassa a böngésző verzióit. Nincs pontos és száraz válasz erre a kérdésre. Magától a webhelytől függ. Ha egy webhely forgalomelemzését nézi, láthatja, hogy mely böngészők használják az adott webhely meglátogatását. Ha az emberek jelentős hányada egy bizonyos régebbi böngészőt használ, akkor valószínűleg támogatni szeretné ezt a böngészőt, vagy kockáztatja ennek a vállalkozásnak a vesztét. Ha megnézi elemzését, és látja, hogy senki nem használja a böngésző régebbi verzióját, akkor valószínűleg eldöntheti, hogy ne aggódjon a régi böngésző teljes támogatása és tesztelése miatt. Tehát a valódi válasz arra a kérdésre, hogy webhelyének mennyire van szüksége támogatásra, "függetlenül attól, hogy az elemzők milyen messzire mondják el, mit használnak az ügyfelek".
Szerk .: Jeremy Girard.
Természetesen az Internet Explorer nagyszámú hibát tartalmaz különböző verziókban, de a feltételes megjegyzések segítségével küzdhet velük, elérve azok megszüntetését. De ami nem javítható, az az, hogy az IE reménytelenül elavult. Míg más böngészők egyre több CSS3 tulajdonságot tartalmaznak, támogatják a különféle újszerű technológiákat, az IE jelöli az időt. Az IE9 kiadás nem oldja meg a problémát, és a korábbi verziók sem párolognak el egyik napról a másikra. Ilyen helyzetben a legjobb megoldás a kecses degradáció lenne - a működőképesség fenntartásának elve, ha a funkcionalitás egy része elvész.
Vizsgáljuk meg ezt a trükköt egy kis példával, amely blokkban és egy gombban jeleníti meg a szöveget. A blokk és a gomb lekerekített sarkokkal rendelkezik, egy kis árnyék is hozzáadódik a blokkhoz. Eddig a CSS3 böngészői főleg meghatározott tulajdonságokat használnak saját előtagokkal:
- Firefox - tulajdonságok kezdve -moz-;
- Safari és Chrome - tulajdonságok kezdve -webkit-;
- Opera - tulajdonságok kezdőbetűi -o-.
Ezeknek a böngészőknek a különböző változatai képesek megérteni egyes tulajdonságokat előtaggal vagy előtag nélkül, ezért az egyetemesség érdekében egyszerre több tulajdonságot adnak hozzá. Tehát a lekerekített sarkok létrehozásához a következő stílusra van szükségünk.
Moz-határ-sugár: 10 képpont; / * Firefox esetén * / -webkit-border-radius: 10px; / * Safari és Chrome esetén * / border-radius: 10px; / * Opera és IE9 esetén * /
Bár ezen tulajdonságok használata érvénytelen CSS-hez vezet, ebben az esetben fontosabb a Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9 böngészőkben, valamint a régebbi verzióiban dolgozni. Az 1. példa bemutatja, hogyan lehet CSS3 tulajdonságokat használni árnyék és lekerekített sarkok létrehozásához.
1. példa Blokkolás árnyékkal
XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx
20 kérdést kell átélnie, amelyeket véletlenszerűen választanak ki az adatbázisból. A teszt sikeres teljesítéséhez elegendő helyesen megválaszolni a javasolt kérdések legalább 75% -át (15 vagy több kérdés).
A példa eredményét a 2. ábra mutatja. 1.
Ábra: 1. Blokkolja a nézetet a Safari-ban
Ugyanezt a példát az IE8-ban és az alábbiakban mutatjuk be. 2.
Ábra: 2. A blokk megtekintése az IE8-ban
Bár az elemek megjelenése részletesen eltér, az oldal általános funkcionalitása megmarad. A gomb megnyomható, a szöveg ugyanaz marad, beleértve a színét és a hátterét, nincsenek megjelenítési hibák. Valójában csak azokban az apróságokban van különbség, amelyek dekoratív, nem alkalmazott funkciókat látnak el. A kecses degradáció minden alapelve teljesül.
Mit ad ez a megközelítés a gyakorlatban?
- Lehetővé teszi a CSS3 dekoratív tulajdonságainak aktív használatát a böngésző megtekintése nélkül.
- Motiválja a különféle CSS3 effektusok alkalmazását.
- Sokkal könnyebbé teszi a fejlesztő életét, mivel már nem kell megoldásokat keresnie elavult böngészők számára.
- Felgyorsítja a munka termelékenységét.
Természetesen a kecses degradáció nem mindig alkalmazható. Ha az elrendezés követelményei a régebbi verziók támogatását jelzik, akkor alternatív megoldásokat kell keresnie, például képeket kell használni a lekerekített sarkokhoz. De az elrendezés követelményei többnyire az általános helyzet figyelembevétele nélkül kerülnek meghatározásra. És ha összehasonlítja a kecses lebontás összes előnyét azzal a hátránnyal, amely csak abban nyilvánul meg, hogy az elavult böngészők, különösen az IE8, nem "szépen" jelenítik meg az oldalt, akkor a szimpátia a fejlődés oldalán lesz.
Régóta nem írtam, az internet nélküli helyre kellett költöznöm (ez a borzalom), aminek következtében nem tudtam írni a blogra. Ma szeretnék beszélni a fejlesztési módszerről (elrendezésről), amelyet részben felhasználnak a blogom megtervezésében.
Az innovatív böngészők legújabb verziói (például az FF 3.5, az Opera 10) néhány dekoratív hatást vezettek be a javasolt CSS 3 specifikációból. Az átlátszóság, az árnyékok és a zebra (csíkos) effektusok már elérhetők JavaScript vagy további jelölés nélkül. De néhány régebbi böngésző, amely még mindig használja ezeket a tulajdonságokat, nem használja, és szomorú lenne azt gondolni, hogy még néhány évig nem lesz esélye használni ezeket a csodálatos hatásokat.
Ebben a cikkben arról fogok beszélni, hogy miként lehet szép (fokozatosan) javítani azokat a böngészőket, amelyek támogatják a CSS3 szolgáltatásait, és ugyanakkor olyan elrendezést mutatnak, amely kielégíti a többi felhasználót.
Mi a fokozatos fokozás?
A "növekményes javulás" fogalmának megértéséhez meg kell érteni a "kecses degradáció" elvét, amelyet jól leír a következő idézet:
Az enyhe romlás azt jelenti, hogy webhelye akkor is működik, ha az optimálisnál rosszabb böngészőben nézzük meg, ahol a fejlett effektusok nem működnek.
Folyékony gondolkodás, írta Peter-Paul Koch
A "Fokozatos fejlesztés" ugyanazt a módszert használja csak az ellenkező oldalról, ahelyett, hogy vigyázna arra, hogy a webhely ne essen szét a régi böngészőben, elsősorban a tartalomra kell gondolnia, és csak a modern programok jellemzőit kell hozzáadnia a tervezéshez a felhasználói élmény javítása érdekében, miközben az alapállapot az elrendezések még mindig működnek a régebbi gépeken. Jelenleg ez a legjobb módszer a CSS 3 új funkcióinak alkalmazására.
Példa
Példaként készítsünk egy egyszerű navigációs menüt, amely kissé szebben néz ki, bármelyik böngésző CSS-támogatásától függően.
Szeretném megjegyezni, hogy ebben a példában nem grafikákat, hackeket vagy böngészőspecifikus előtagokat használok - minden fejlesztés a deklarált képességeknek köszönhető. Ezt szem előtt tartva az alábbiakban felsorolt \u200b\u200bdolgok némelyike \u200b\u200bcsak példaként szolgál, és nem biztos, hogy a legjobb választás a valódi weboldalak készítéséhez.
Jelölés
Készítsünk egy egyszerű menüt egy rendezetlen lista (ul) használatával:
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
Alapstílus
Alapvetően egy olyan stílust fogok használni, amely csak egyszerű öröklési választókat használ. Határt hoz létre minden elemnél, és megváltoztatja az egérmutató hátterét (onmouseover). Ennek működnie kell az elmúlt 7-8 évben készült böngészőkben (és esetleg még többekben).
A CSS nagyon egyszerű:
Ul (
háttérszín: kék;
alsó-alsó: 1px pontozott # 999;
list-style: nincs;
margó: 15px;
szélesség: 150px;
}
li (
háttérszín: #fff;
szegély: 1px pontozott # 999;
határ-alsó szélesség: 0;
betűtípus: 1.2em / 1.333 Verdana, Arial, sans-serif;
}
li a (
fekete szín;
kijelző: blokk;
magasság: 100%;
párnázás: 0,25em 0;
text-align: center;
szövegdíszítés: nincs;
}
li a: lebeg (háttérszín: #efefef;)
Az egyetlen furcsaság itt a kék háttér
- ; Ezt később elmagyarázom. Ezzel a stílussal a következő alapnézet lesz, amely az IE6-ban így jelenik meg:
Alapvető elrendezés az IE6 és más régi böngészőkben.
Fejlesztések alkalmazása
Az IE7 az IE böngészősorozatban elsőként támogatta az összes CSS 2.1 attribútumválasztót, ami szinte az összes többi böngészőben is elterjedt. Az egyiket - a gyermekválasztót - felhasználhatjuk a fejlődés megkezdéséhez. Mivel az IE6 nem támogatja a gyermekválasztókat, figyelmen kívül hagyja a következő szabályokat:
Törzs\u003e ul (szegély szélessége: 0;)
ul\u003e li (
szegély: 1px szilárd #fff;
szegélyszélesség: 1px 0 0 0;
}
li\u003e a (
háttérszín: # 666;
fehér szín;
betű súlya: félkövér;
}
li: első - gyermek a (szín: sárga;)
li\u003e a: lebeg (háttérszín: # 999;)
Ezekkel a CSS-szabályokkal a lista így néz ki:
A menü most színes háttérrel és vastag szöveggel rendelkezik, és az első link más színnel van kiemelve.
Ekkor megjelenik az IE7, a Firefox, a Safari és az Opera listája.
Tegyünk nagyobb hangsúlyt
A következő lépés a hangsúly növelése egy olyan tulajdonság használatával, amelyet az IE nem ismer fel: Opacity. Ehhez nincs szükségünk speciális szelektorok használatára, mert Az IE egyszerűen kihagyja azokat a tulajdonságokat, amelyeket nem támogat:
Li (fedettség: 0,9;)
li: lebeg (átlátszatlanság: 1;)
A következő képen látható, hogy ez a tulajdonság hogyan működik az operában. Láthatja, hogy a listaelemek enyhén kék árnyalatot kaptak a háttérből.
- ... Az egérrel az összes elem teljesen átlátszatlanná válik:
Természetesen használhatja az IE szűrőtulajdonságát ugyanarra a hatásra az IE-ben. Valamint a böngészőspecifikus előtagokat (-moz-, -webkit-) az alábbi tulajdonságokhoz. De oktatási célokra ragaszkodom a CSS-szabványhoz, mivel a szűrő nem szabványos. tulajdonság, akkor nem érvényes.
A Firefox 2 támogatja az átláthatóságot, de a későbbi böngészőkben még tovább léphetünk. A Safari és az Opera alkalmazásban a text-shadow tulajdonság segítségével díszíthetjük a szöveget:
Li a: lebeg (szöveg-árnyék: 2px 2px 4px # 333;)
Amint a következő kép mutatja, az elem egy kis árnyékot kap az egérrel, és úgy tűnik, kissé kinyúlik az oldalról:
Végül gondoskodhatunk az Opera teljes támogatásáról az új CSS 3 szelektorok számára, és hozzáadhatunk egy újabb fejlesztési réteget: változó háttérszínek az n-dik gyermek választóval:
Li: n -edik gyermek (2n + 1) a (háttérszín: # 333;)
li: n -edik gyermek (n) a: lebeg (
háttérszín: #aaa;
szín: # 000;
}
li: első - gyermek\u003e a: lebeg (szín: sárga;)
Csíkos menüt fogunk látni az Operában:
Összefoglalás és következtetések
Az alábbi kép megmutatja, hogyan néz ki a kezdeti jelölés az IE6, IE7, Firefox, Safari és Opera rendszerekben, miután a cikkben ismertetett CSS-szabályokat alkalmazta. amint láthatja, ahogy a CSS böngészőtámogatása kifinomultabbá válik, a menük stílusosabbá és kifinomultabbá válnak, és fokozatos fejlesztési technikával a menük még a nagyon régi böngészőkben is működőképesek maradnak.
Természetesen sok böngésző rendelkezik egy sor egyéb tulajdonsággal, amelyekre itt nem térek ki, de amelyek felhasználhatók, például az RGBA színek és az SVG háttérszínként.
