css

Štai kaip jausmus išreiškia HTML ir CSS specialistai:

Et, kad visi taip sugebėtų :) Gero penktadienio, gero savaitgalio! Iliustracija rasta:

Šaltinis

Turbūt nei vienas tinklapių kūrėjas neapsieitų be Galingiausio FireFox priedo – FireBug, kuris yra pripažintas pačiu naudingiausiu įskiepiu. Gaila, tačiau FireBug kol kas galima įsidiegti tik į FireFox, o kitų naršyklių Web-developer įrankiai negali jam prilygti. Tam, kad situacija būtų nors kiek geresnė FireBug Kūrėjai sukūrė pilnai JavaScript’u parašyta FireBug Lite versiją, kurią galima įsidėti į bet kokį tinklapį ir matyti visose naršyklėse (Juk JS palaiko visos naršyklės)

Paprasčiausias būdas naudotis šiuo įrankiu yra įsikelti jo kodo nuorodą į savo Bookmark’us – Tiesiog nutempkite FireBug Lite tinklapyje pateiktą nuorodą į savo BookMarko juostą ir turėsite nuorodą, kurią paspaudus FireBug Lite atsidarys bet kuriame tinklapyje.
Gaila tačiau ši FireBug’o versija dar negali redaguoti tinklapio turinio, bet manau pradžia jau padaryta :)
Taip atrodo FireBug Lite:

Daugumą klasikinių interneto svetainių galima išskirti į dvi grupes pagal jų atvaizdavimo principą. Svetainė centruojama naršyklės lange arba ji yra prisiglaudusi prie kairiojo krašto. Žinoma, atsiranda ir kūrybingesnių žmonių sugalvojančių įmantrių atvaizdavimo būdų, bet dažniausiai naudojamas centruoto puslapio variantas.

Nusprendžiau trumpai ir aiškiai aprašyti kaip centruojama svetainė interneto naršyklėje. Viso labo tai kelios CSS kodo eilutės, tačiau net ir tokie dalykai kai kuriems žmonėms praverčia.

Norint svetainę centruoti, turime žinoti jos plotį. Vienintelis dalykas, kurio reikia iš HTML pusės, tai apsirašyti šakninį svetainės elementą, pavadinkime jį pvz.: site. Dabar CSS faile aprašome stilių site ir body žymoms.

Po Rimanto komentaro, išsiaiškinom, kad tai gali būti atlikta su dar mažiau kodo. O tam kad IE6 rodytų teisingai tiesiog turi būti nurodytas DOCTYPE. Nemanau, kad dabar yra svetainių, kuriose jis būtų praleistas. Liko tik dvi eilutės CSS.

Su paaiškinimu:

Gana retai kas užsimano, kad puslapyje atvaizduojamas kursorius būtų koks nors įmantresnis, bet būna visko.  Nieko tokio, kai tai tik kitokia rodyklė, kurią galima pasirinkti iš jau leistinų, tačiau kai prireikia kažko visiškai unikalaus, tenka gerokai paplušėti, kad viskas atrodytų gerai.

Pagal viską CSS parametras cursor turi nemažai numatytų reikšmių, kurios palaikomos pagrindinėse naršyklėse. Aprašomas ir parametras url(), kuriame nurodžius jūsų pasirinktą paveikslėlį, jis bus atvaizduotas vietoj kursoriaus.

Nors ir skelbiama, kad IE6+ puikiai atvaizduoja kursoriaus paveikslėlį jei jis .cur formato, man to pamatyti nepavyko. Bandant su FF, G Chrome bei Safari atvaizduojama tvarkingai. Išbandžius FF neprieštaravo net jei buvo naudojami .gif paveikslėliai. Verta paminėti, kad nenurodžius alternatyvaus kursoriaus po kablelio, nei vienoje naršyklėje nieko nepamatysite, taigi rekomenduotinas toks formatas:

cursor: url(cursor.cur), default;

Vietoj default gali būti pointer, text, help ir kiti numatyti kursoriai.

Apie objektinį programavimą turbūt teko girdėti kiekvienam IT srityje besimokančiam ar dirbančiam. Sunku ir įsivaizduoti kaip seniau buvo galima dirbti be to. Tačiau objekto sąvoka HTML bei CSS srityje – naujas dalykas.

Tokios idėjos esmė CSS selektorių hierarchija. Kuriamos kuo bendresnės klasės, kurios tarsi išplečiamos pagal poreikį (sakau “tarsi”, nes css neturi tokio dalyko kaip extends). Taip susikūrę kelias pagrindines klases blokams, sritims ir kitiems dažnai pasikartojantiems ir mažai besiskiriantiems elementams, juo vėliau patiksliname pagal poreikį pridėdami konkretesnes klases. Pavyzdžiui turime bendrą klasę block, kurią prireikus dekoruojame ir pritaikome pridėję klasę side_block.

Objektinio mąstymo CSS/HTML srityje  pradžia  galime laikyti CSS framework’us – CSS klasių bibliotekas leidžiančias greitai ir struktūriškai kurti svetainės išdėstymą.

Kokia iš to nauda? Ogi tokia, kad prireikus kažkokį elementą panaudoti dar kartą nereikės jam rašyti naujų stilių grandinės, užteks atkartoti HTML kodą ir priskirti tą pačią klasę. Verta paminėti, kad tokiu būdu projektuojant CSS žymiai patogiau ankstesniuose projektuose sukurtas klases panaudoti naujuose, nes jos išdėstytos objektiškai ir nėra priklausomos nuo tėvinių elementų.

Susidomėjusiems įdėja siūlau pažiūrėti video prezentaciją apie OOCSS. Ji ilgoka (~45 min), bet įdomi.

Ilgą laiką įdomesnės nuorodos buvo žymimos įvairiose sistemose: uždedant žvaigždelę arba paspaudžiant mygtuką “Share” Google Reader kliente, įkeliant žymę į Deliciuos sistemą, išsaugant žymę naršyklės nuorodų saugykloje. Laikas bėga, nuorodos sensta, o jomis naudojuosi (beveik) aš vienas. Nesąžininga. Taisau klaidą ir dalinuosi geriausias (mano subjektyvia nuomone) nuorodas, kurios gali būti naudingos frontend.lt skaitytojui:

SEO

„Google“ paieškos sistemos optimizavimo pradedančiųjų vadovas – sukurtas naudoti kompanijos Google viduje, tačiau vėliau nuspręsta, jog ten surašytos mintys bus aktualios visiems. Rekomenduojame.

List of Best and Worst practices for designing a high traffic website – sąrašas svetainės savybių, įvertintų balais, pagal tai, kiek tai yra (ne)naudinga kuriant puslapio įvaizdį paieškos robotams (Google, Yahoo!, Microsoft).

HTML

10 HTML Tag Crimes You Really Shouldn’t Commit – pateikiama 10 dažniausiai pasitaikančių nusikaltimų HTML kalbai. Turėtų kas nors bausti nusikaltėlius!

10 HTML Tags that are Overlooked but Should be Used – iš div elemento, CSS pagalba sugebame padaryti bet ką, tačiau galbūt neverta išradinėti dviračio, o imti jau pagamintas žymes ir naudoti savo kode?

CSS

WordPress

Lentelėmis formuojamo dizaino laikai pamažu praeina. Dabar struktūra dažniausiai formuojama div elementų pagalba. Juos karts nuo karto tenka pastumti ar į vieną ar į kitą pusę, o tam naudojamos css reikšmės float: left; ar float: right;. Tokiose situacijose dažniausiai ir prireikia clearfix.

Kai vaikiniams elementams yra priskirti float: left; ar float: right; atributai, o tėvinis elementas neturi fiksuoto aukščio, nutinka taip, kad tėvinis elementas vaizduojamas tarsi tuščias, arba tik teksto eilutės aukščio.

Mums norėtųsi, kad tėvinis elementas būtų bent jau tokio aukščio kaip vaikiniai elementai. Štai šią problemą ir išsprendžia clearfix metodas. Jis realizuojamas css faile aprašant klasę, kuri po to priskiriama tėviniam elementui.

Čia aprašyta daugiau klasių su skirtingomis pradžiomis todėl, kad skirtingos naršyklės kai kuriuos atributus supranta skirtingai.

Priskyrus šią klasę aukščio problema bus sutvarkyta ir tėvinis elementas atrodys taip kaip ir norėjome.