CSS selektoriai

Šį ramų šeštadienio vakarą vietoj nesėkmingo savęs vertimo daryti “namų darbus” :-) nusprendžiau šiek tiek atitrūkti ir pasiguosti labai kūdu CSS selektorių supratimu ir panaudojimu, kur tenka su tuo susidurti.Kiekvienas siekiantis, kad jo rašomas HTML taptų bent kiek patrauklesnis akiai, turi paplušėti ir su CSS. Dažniausiai naudojami selektoriai yra # (id), . (class) ir elemento (tag name), bet dėmesio! Jūsų gyvenimą palengvinti gali ir daugiau išraiškų!Mano manymu labiausiai nepelnytai pamirštas yra atributo selektorius:

pre[lang] // visi elementai "pre", turintys atributą "lang"input[type='submit'] // atributo reikšmė 'submit'div[lang~='lt'] // viena iš atributo 'lang' reikšmių, atskirtų tarpais, yra 'lt'// o CSS3 galima ir taip:a[href ^="mailto:"] // $ analogiškai žymėtų atributo reikšmės pabaigą

Taip pat paminėtinos ir pseudo-klasės:

p:first-child // pažymi (ok, ok - paselektina) pirmą vaikinį elementą// yra ir last-child, bet IE su tokiu nedraugaujaa:link // naudojamas dažniau, pažymi A elementus su href atributu. Kitaip tariant a[href]a:visited // self-descriptive:lang(lt) // galime pakeisti lietuviško turinio nustatymus. Pvz. kabučių atvaizdavimą

Analogiškai – pseudo-elementai:

// self-descriptivep:first-linep:first-letter:before:after

Ir dar vienas naudingas ir pamirštas, kuriam neturėjau daugiau ko prirašyti į grupę :-)

h1 + h2 // pažymi h2, einantį iškart po h1

Šiek tiek tokių žinių ir jūsų HTML ir CSS failai palengvės bent 10% ;-)Daugiau informacijos: W3C

13 thoughts on “CSS selektoriai

  1. Vidmantas

    Jo, jei būt sąžiningam tai aš paskutinio irgi nežinojau, o atradau kai ieškojau "pagrindimo" šitam įrašui :-)

    Reply
  2. Alius

    Postas toks iki galo neišbaigtas. Reikėjo pasigilinti į tai kad IE6 viso to nepalaiko (rimtuose projektuose vis dar reikalauja palaikyti IE6), o ir kiti IE ne viską vykdo 100% teisingai.O tam kad sumažinti CSS svorį, aš asmeniškai projekto pabaigoje naudoju CSS kompresorius kurie sukompresuoja CSS failiukus panaikindami viską kas ten nereikalinga – tarpai, kabliataskiai ir panaisiai.Sekmės mokantis CSS ;)

    Reply
  3. Vidmantas

    Aliau, ačių už kritiką. Iš tikrųjų aš itin daug IE compability nesidomiu, bet nevadinčiau YouTube ar Facebook nerimtais projektais – jų poziciją IE6 atžvilgiu matyt žinai :-) Be to, įdomu būtų išgirsti kurių konkrečiai CSS2 specifikacijoje numatytų selektorių IE versijos nepalaiko arba palaiko ne pagal aprašymą Na, o lengvumą turėjau omenyje ne fizinį, o struktūrinį :-)

    Reply
  4. Karvė

    Jo, su IE6 yra rimtų problemų – ten tikrai neveikia atributų selektoriai… O YouTube ir Facebook savo požiūrį gali sau leisti, nes yra dideli – norėdami išpopuliarinti naują projektą kūrėjai negali sau leisti jokio user unfriendliness :)Bet tokia jau web developerių duona – paskutinis darbas prieš paleidimą – nuo kelių valandų iki kelių dienų su IE6…

    Reply
  5. Pawka

    Su IE6 problemų nėra. Pats IE6 yra problema. Todėl reikia ją tiesiog pamiršti, nes bandant pritaikyt projektą dirbti ant IE yra gaištamas laikas. Geriau patikrint, ar tas projektas tinkamai veikia ant FF, Operos, Safario.Aliau, omeny turėjai ne "CSS kompresorius", o minifikatorius (JS, dar galima taikyti obfuskavimą – gali sumažint simbolių kiekį). O tuo tarpu CSS ir JS kompresija laikomas failų suspaudimas serverio pusėje. Vartotojui yra siunčiamas failų archyvas, kurį apdoroja naršyklė.

    Reply
  6. Karvė

    Pawka, kai 30% tikslinės auditorijos naudoja IE6, o tu užsiimi Internetiniu bizniu, tai pamiršti IE6 tolygų atsisakyti pardavinėti savo prekes negražiems žmonėms. Galbūt jei tavo prekės labai unikalios ir reikalingos – gali sau leisti tokius išsidirbinėjimus, bet jei žaidi konkurencingoje rinkoje, privalai būti kuo labiau user-friendly.Verslas yra verslas, norėdamas rodyti savo principus, pirma turi turėti šiek tiek košės…

    Reply
  7. Rytis

    kadangi darbuojuosi Olandijos web industrijoj, tai galiu pasakyti, kad IE6 palaikimas skaičiuojamas kaip atskiras ir nepigus projekto "feature’as".

    Reply
  8. Pawka

    @Karvė. 30% yra seni skaičiai. Šiuo metu IE6 naudojimas (bent jau pas mus), nesiekia 10%.

    Reply
  9. Pawka

    P.S. Pagal ranking.lt statistiką, IE6 vartotojų Lietuvoje yra 13,57% (šiuo metu kai žiūrėjau). Tad čia tik pačių web developerių reikalas į kokią padėtį save pasistatyti: ar toliau gaišti darbo laiką bandant pritaikyt svetainę IE6, ar greičiau nugramzdinti šitą nesamonę.Mūsų įmonėje priėmėm sprendimą, kad nuo naujųjų metų atsisakom IE6 palaikymo.

    Reply
  10. Vidmantas

    Palaikau tą pusę, kad reikia IE6 pamiršti. Jeigu vis žiūrėsim į mažumas, tai šiuo metu degalinėse vis dar turėtų pardavinėti 76 benzą o kiti "įprastų" degalų pirkėjai primokėti už šios paslaugos išlaikymą

    Reply
  11. Karvė

    Na aš dar turėjau omeny gero pusmečio senumo duomenys, kai mūsų tikslinėje auditorijoje IE6 sudarė veik 30%. Dabar pasitikslinau ir tiesa – 13.6% – maloni žinia, kad mažėja.Aš duoną irgi iš web developinimo valgau ir seniai pastebėjau, kad tikrai yra naršyklių mažumos paradoksas. Developeriai IE6 net ir su 20-30% rinkos buvo linkę jau laikyti mažuma vien todėl, kad 1 – IE6 suderinamumas tikrai kelia žymiai daugiau rūpesčių palyginus su kitomis naršyklėmis ir 2 – tai tapo stipriu trend’u ir net 5 puslapių projekto developeriai ėmė matyti čia milžiniškas pastangas (nors sugaištų gal pusvalandį). Bet va Chrome/Safari ar Opera net ir su juokingais vienaženkliais skaičiukais nėra laikomi mažumomis, nors kartais ir jie gali būti rakštis subinėj (pvz vien todėl, kad tag name’ai pas juos kitų case’u, o naudojama biblioteka tuo nepasirūpino).Vidmantai, tavo pvz su benzinu yra vienpusiškas. Jei mažumos visada būtų ignoruojamos, tai kitokio, kaip tik 76 benzino mažiau pasiturinčiose šalyse niekada ir nebūtų buvę, nes 85, 92, 96 – visi kažkada buvo mažumos. Pvz dabar Lietuvoje tikrai nebūtų 98, nes bent mano suvokimu (reikėtų žinoma čia statistikos), tai mažuma. Pagal tavo logika, į Chrome/Safari ir Opera nereikėtų kreipti dėmesio išvis…Anyway, suprantų developerių požiūrį, man jis ilgai buvo natūralus ir dar dabar nesvetimas (nes tai pagrindinis darbas), tačiau prieštaraujantis laisvos rinkos įdėjai, kur paklausa reguliuoja pasiūlą, o ne atvirkščiai. Būtent kai pareigos prasiplėtė ir dabar tenka vadovauti visam projektui bendrai + jis dalinai man priklauso, tuomet mintys seka kitaip – pirmiausia dirbama prie IE (bendrai) suderinamumo ir tik po to prie Chrome/Safari ir Opera (jei to apskritai reikia), nes % pasako viską. Keičiantis procentams, keičiasi ir prioritetai ir kai IE6 liks 5% (ir tikiuosi tai bus greit) manau bus apskritai nustota apie jį kalbėti…

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *