CSS sprite feliratos gomb-ra IE9 alatt is
Meg lehet oldani egyetlen <a> elem használatával, egy feliratos gomb elkészítését, ha a gombon egy ikonkép is van és az css spriteból érkezik?
Ha az ikonok külön-külön fájlban vannak, akkor nyilván nincs probléma.
Ha css sprite-ot használok (ömlesztett ikonokkal), akkor a lenti kóddal sajnos a "gombfelirat" alatt látszik a forrás png kép néhány más ikonja is. Van valamilyen maszkolási, háttérképméret állítási lehetőség?
Ami még eszembejut, hogy a sprite-ot úgy állítom össze, hogy az ikonok körül nagyobb kifutó sávot hagyok, csak sajnos a sprite összeállításakor nem lehet még tudni, hogy az adott ikon milyen formájú gombra/egyéb elemre lesz elhelyezve, úgy pedig elég nagy felületű png állományt kell csinálni. :-(
IE9-en is működő megoldásra lenne szükségem!
Előre is kösz a javaslatokért!
HTML:CSS:
■ Ha az ikonok külön-külön fájlban vannak, akkor nyilván nincs probléma.
Ha css sprite-ot használok (ömlesztett ikonokkal), akkor a lenti kóddal sajnos a "gombfelirat" alatt látszik a forrás png kép néhány más ikonja is. Van valamilyen maszkolási, háttérképméret állítási lehetőség?
Ami még eszembejut, hogy a sprite-ot úgy állítom össze, hogy az ikonok körül nagyobb kifutó sávot hagyok, csak sajnos a sprite összeállításakor nem lehet még tudni, hogy az adott ikon milyen formájú gombra/egyéb elemre lesz elhelyezve, úgy pedig elég nagy felületű png állományt kell csinálni. :-(
IE9-en is működő megoldásra lenne szükségem!
Előre is kösz a javaslatokért!
HTML:
<a href="#">gombfelirat</a>
a{
background-color: #baae86;
color: #fefefe;
background-image: url('graphics/hatter.png');
padding: 6px 6px 6px 40px;
background-position: -100px -100px ;
width: 36px;
height: 36px;
}
Használd a :before vagy
De gáz, hogy ez nem jutott
Occam borotvája
Igen, alapból én is úgy
A pszeudo elem még I8-ban is támogatott, alatta pedig egyszerűen nem jelenik meg az ikon képe, ami a használatot egyébként sem rontja. Azon a böngészőszinten pedig nem hinném, hogy a user meglepődik a purritánabb dizájnon.
A kód csak látszólag
Miért cinikus ha nem érdekel,
A <span> javaslatod teljesen jó, viszont szeretném a design-t css-ben tartani.
Teljesen igazad van,
Ha megrendelőnek készíteném
Viszont én most szeretnék saját magamnak végre olyan html kódot írni, ami tényleg csak a hasznos tartalmat foglalja magába. Ezért kérdeztem eredetileg is így: "Meg lehet oldani egyetlen <a> elem használatával"? Szóval én most ragaszkodom a css-hez! :-)
A DOM fás hozzászólásod egyébként elgondolkoztatott azon, hogy érdekes lenne megnézni mondjuk párszáz objektumnál, hogy a két változat közül melyiket rendereli le gyorsabban a böngésző. A pszeudó elemek lelkivilága egyébként nem világos nekem!
A CSS bizonyos megoldásaiból
Az utolsó bekezdésedben írtakon én is elgondolkoztam, és arra tippelnék, hogy a pszeudoelemeket valószínűleg lassabban rendereli le a böngésző (ha előbb generálja a DOM fát, és csak ezután alkalmazza a stílusokat), vagy legalábbis úgy kell elkészíteni a szoftvert, hogy a DOM fa felépítésekor már tudja, hogy mely elemek mellé kell pszeudoelemeket generálni.
Hát igen, ehhez az is kell,
A problémára részleges megoldás és lehet, hogy ismered:
http://css-tricks.com/understanding-border-image/
Ez természetesen IE-ben nem működik! :-)
Nem baj, ha ragaszkodsz a
Ilyen szituációban szerintem is teljesen elfogadható, ha az IE7-ben nincsenek ikonok. Legyen elérhető a tartalom és legyenek használhatóak a fő funkciók (persze csak akkor, ha a fő funkció eleve nem valami modernebb technológiára épül). Az IE7 (reméljük) most már pár éven belül eltűnik, viszont a szép, jól felépített és szeparált kódod megmarad. Aztán ha 1-2-x év múlva fejleszteni kell rajta, nem azon fogsz bogarászni, hogy most mi miért van itt és melyik ősöreg IE miatt kellett ilyen fapadosan megoldani.
Ha rajtam múlik...
Építeni is lehet rá, mivel
Úgy vélem, az IE8-al lesz a probléma, mert az XP-seknek nincs jobb opciójuk, ha mindenképp IE-t akarnak.
Ha minden böngésző okos
Logikai funkciója van az oldalon a fejlécnek és a láblécnek, vagy ha mondjuk több oszlopba szeretnéd rendezni a tartalmat, itt is szükség van "felesleges" elemekre.
2, Nyolc-tíz éve jött be a divatba, hogy a stílusokat tegyük css-be, a scripteket js-be, válasszuk ezeket külön a html-kódtól. Ezzel az elvvel szembemegy a HTML 5 újítása, a data- attribútumok, amelyek a definíció szerint alkalmazásspecifikus adatokat tartalmaznak, azaz kerülhetnének akár saját scriptblokkba, csak így kényelmesebb. Ebből számomra az jön le, hogy a szabványírók körében ez a szétválasztósdi ma már annyira nem menő.
3, Egy adott css vagy js fájl is alkalmazásspecifikus, és csak az adott html-lel működik. Korábban az volt a nagy ötlet, hogy vegyük külön ezeket, mert majd egy későbbi redizájnnál elég lesz csak a css-t átírni, és kész is az új oldal. Ez egy primitív oldalnál még működhet is, de amint kicsivel több információt szeretne a megrendelő megosztani, borul a bili, mert az újratervezésnél általában más információt szeretne más formában megosztani, ami a html átvariálását is magával hozza.
4, Tipikusan az űrlapelemeknél, amelyek beépített megjelenése sokszor nem tetszik a grafikusnak, és amelyek skinezését csak nagyon korlátozottan támogatják a böngészők, kénytelenek vagyunk saját kódot írni, hogy úgy nézzen ki és úgy működjön, ahogy az meg lett álmodva.
A fentiek alapján én magamnak azt a következtetést vontam le, hogy nincs értelme a szétválasztást annyira erőltetni. Sőt, nemrég arra vetemedtem, hogy bizonyos egyedi stílusokat inline adtam meg, mert nem volt kedvem a css fájlt megnyitni. Ugyanezt megtehetném hasonló eseménykezelőkkel is, miért is ne?
A fentiekből következik, hogy a html, a css és a js egy egységet alkot. Aminek szerintem nagyobb értelme lenne, hogy az adatokat különválasszuk a megjelenítéstől. Így könnyebb lenne a gépi feldolgozás, a strukturálás valamint a keresés.
Igen
De attól, hogy egy egységet alkot, én még külön, kvázi 3 fájlban (valójában azért több) könnyebben kezelem. Azért is, mert esetleg van olyan CSS vagy JS, ami csak az adott oldalra vonatkozik. Természetesen megvan a lehetőséged arra is, hogy ezek forrását is a HTML-ben tárold, de így kevésbé átlátható a kiküldött HTML. De ezen még gondolkodom, valójában talán "röptében" kéne ezeket a kiegészítő stílusokat-funkciókat (külön forrásfájlból) minify-olva, forrásként adni a HTML-hez (így kevesebb a HTTP kérés). Ez viszont + szerveroldali erőforrás (cachelni meg épp azért nem érdemes, mert hátha redesign van, akkor ne kelljen várnod a láthatóságra).
Ehhez viszont valami nagyon "olcsó" - ha nem is a legtökéletesebb - megoldást kéne írjak vagy találjak a mimify-ra.
Szerintem az, hogy lustaságból írsz
style="..."-t, azzal magadat eteted, ennek kb. csak akkor van értelme, ha egyetlen elemre vonatkozik. Na jó, legyen max. 3 elem.Redesign-nál is egyszerre kell kezeld a min. 3 fájlt, egy jó szerkesztővel ez nem gond. Te viszont nem használsz semmilyen kényelmet (IDE), ami szerintem nehezíti a dolgodat, de te tudod, mi a jó neked.
Nézd, múltkor erről már
Továbbra sem érdekel, hogy Hidvégi Gábor meg tud mindent oldani OOP, HTML5, separation of concerns, továbbá minden olyan technológia nélkül, amit az IE7 és a Flash óta kitaláltak, de valahogy mégis minden egyes beszélgetésben megjelenik és ezt reklámozza. Miért ez a keresztes háború? Mi a célod vele? L'art pour l'art, illetve kötekedés simán a kötekedés, lázadás simán a lázadás kedvéért?
Tudod, azért mert a zsenik általában szembemennek az aktuálisan elfogadott tudással/normákkal, maga a szembefordulás még nem tesz valakit zsenivé. Sőt.
(Azért hozzáteszem, hogy nem megsérteni akarlak mindezzel. Biztos, ami biztos.)
Azért ez túlzás
Igen, Gábor "harcos típus" de kellenek ilyenek. Ez az én véleményem. Mert elgondolkodtat, egészséges vitára serkent, stb. És sok dologban igazsága is van, ezeket te sosem hangoztatod, csak a negatívumot. Nevezzük ezt 1-nek.
A 2:
1 + 2 = már sértő, hiába nem az volt a szándékod (amit én el is hiszek). Szerintem. Nem csak a szándék a fontos, de az is.Írj magadnak egy scriptet ha
Sokkal jobban venné ki magát,
Ez igaz
Holnap már keresem is! (Csak hogy legyen határidő is - Ádám örömére is). :)
Ez van, ez meg az én véleményem :)
Örülök én, hogy harcos típus, ő dolga, de pontosan miért harcol? Miért pont itt? Érzi úgy, hogy van bármi eredménye, azon kívül, hogy kiadhatja magából és figyelnek rá?
A sértődésről már elmondtam, hogy szerintem aki megsértődik, az magára vessen. A megsértődés egy értelmetlen emberi aktus, ami az őszinteség meggyilkolásán kívül semmire nem jó. Azért deklarálom ilyenkor a szándékomat, hogy megspóroljak néhány felesleges kört magamnak.
Nem tudom eldönteni, hogy nem
Pont, hogy azt állítom, az ilyen "best practice"-ek, dogmák (OOP, szétválasztás és társaik) azok, amik a fejlesztőket korlátozzák, és azt javaslom, inkább törekedjen mindenki minél több alternatíva megismerésére ("választás szabadsága" egy feladat megoldásánál). Ezek a dogmák kirekesztőek, és jellemző rájuk, hogy a hirdetőitől sosem láttuk például azt, hogy "az OOP nagyon jó, de akkor nem érdemes használni az öröklődést, amikor..." vagy "a javascript túlzott használata lassítja a böngészőt".
Miért és miben jobbak az
Hm, én elég sok helyen találkoztam ezekkel.
Haha, jó, akkor mondok egy
Sok dolgot összekeversz
Gábor nem szólja le a bevett technológiákat-szokásokat (többnyire), hanem felhívja a figyelmet, hogy nem csak az van. Anélkül is lehet. Ezt te rögtön át is fogalmazod, szerinted azt mondja: csak másképp jó. Akkor most ki harcol kivel?
Talán nem ugyanaz a sértés és a megsértődés.
Te sértetted Gábort, ezzel együtt nem hinném, hogy megsértődött. Így ez téged minősít (illetve őt is, csak a másik irányban).
Csak példa, ne vegyétek személyeskedésnek:
Én azt mondom (így jobb) Vér Pistikének: "nem akarlak bántani!", közben mondjuk háromszor hasbaszúrom a disznóölővel, akkor nem kapok érte életfogytot, mert "deklaráltam" előtte a szándékom?! :)
Ráadásul te utólag "deklaráltál", nem előre. Tehát rájöttél a tettedre, mégis posztoltad.
Sajnálom, de amilyen jól is tudod látni néha a dolgokat, most annyira rosszul látod.
Először is: számtalan esetben
Lehet, hogy igazad van,
De innentől figyelek ám! :)
Miért ez a keresztes háború?
Mit látsz a képen?
"Mit látsz a képen?" Hogy
Hogy durván túlexponálták a hátteret és hiányzott a derítés. :)
Fotósuli :)
Képet lehet túlexponálni, csak hátteret nem. Néha ez is egy művészi eszköz. Vagy csak rossz fénymérés. De mivel a blende és a záridő nem változtatható a kép különböző részeire, lehetetlen a hátteret túlexponálni. Az előtér árnyéka miatt van szükség erre a beállításra, ezért "világít" a fű.
(Gábor, a kedvemért légyszi ilyen képet többet ne. Én nem mondom meg, mit látok, de kitalálod.)
Ne akard, hogy kiselőadást
Gondolok itt a megfelelő derítés használatára.
Korábban te is panaszkodtál,
A spanos megoldásoddal semmi bajom nem volt. Egy kompromisszum, amit az ember kénytelen megkötni, ha úgy húzza meg a vonalat. Hogy hol a vonal, azt a fejlesztő(csapat) dönti el, az adott projekt céljainak és célcsoportjának figyelembevételével.
A képen pinát látok.
mi a megfejtés? vagy nincs?
Arra szerettem volna célozni,
Szép kis vita alakult ki az
Az űrlapelemek skinezésével mi a gond? Én pont az űrlapoknál szoktam leginkább érezni a korábban kialakított css állomány, stílusok előnyét.
Occam borotvája elv szerintem nem azt mondja ki, hogy mindenkinek meg kell felelni! Hanem, hogy ha egy adott problémát többféleképpen lehet megoldani, akkor az egyszerűbbet kell választani. Esetemben az alap probléma az, hogy egy linknél kiderüljön, hogy mire való és működjön. Ha valaki nem látja az ikont, attól még a feliratot el tudja olvasni, a link működik, tehát probléma megoldva. Ezért nem egyértelmű, hogy a <span>-os megoldás felelne meg jobban az elvnek!
Egyébként meg mindenki dolgozzon úgy ahogy neki jólesik! :-)
Hát igen. Nem ez volt a nyerő
(egy jól komponált fotó egyébként sem jó az ilyen dolgok szemléltetéséhez, mert a kompozícióból következően azt fogod látni, amit a fotós láttatni akar - gyenge fotós rossz képe már más kategória ;) )
Milyen fa? Milyen erdő? :D
A pszeudot is használhatod
Igen, közben sikerült