Jau kuris laikas pavydėjau Bruce Lawson, kad jis paėmė ir sužymėjo savo blog’ą HTML5. Kentėjau, tingėjau ir atidėliojau, kol va pagaliau šį savaitgalį paėmiau ir pasidariau tai pats. Tiesa, ne iki galo ir ne visai taip kaip norėjau, bet hell – HTML5 galima privaloma, bent dalinai, naudoti jau šiandien.
Vienas labiausiai internete užknisančių dalykų yra tai, kad kai kurios svetainės visiškai manęs negerbdamos paima ir perrašo įvesties laukų turinį tada kai aš jau ten bandau kažką rašyti. Ši situacija kyla iš to, kad nėra paprasto būdo nustatyti ar (ir kuris) HTML elementas yra fokusuotas ar ne. Internet Exploreris jau senokai turi document.activeElement, bet kas iš to, jeigu tai negalioja kitoms naršyklėms. HTML5 specifikacijoje yra standartizuotos abi -element.hasFocus ir document.activeElement galimybės, tačiau ką daryti šiandien? Tingiu skaityti – duok galutinį sprendimą.
Aprašytos problemos sprendimo algoritmas yra gana paprastas – prikabinti įvykių gaudytojus prie reikalingų elementų ir pačiam nustatyti reikalingus parametrus. Tačiau jeigu nesusimąstytume – greitas ir paprastas įgyvendimas turėtų kelias problemas.
Šitas įrašas yra visai ne apie tai, kas būtų jeigu Sabonis žaistų krepšinį gulėdamas ant grindų (tiesa, esu įsitikinęs, kad jis tai darytų puikiai). Ir tikiuosi iš pirmojo sakinio supratote, kad nesusipainiojau ir (beveik) neketinu kartotis vertikalaus centravimo tema.
Dažniausiai norint nežinomo pločio elementą išcentruoti horizontaliai kitame elemente problemų nekyla – užtenka tiesiog paprasto text-align:center; ar kiek sudėtingesnio display:block; margin-left: auto; margin-right: auto;. Šie abu variantai netinka tuo atveju, kai vidinis elementas yra platesnis negu išorinis. Jeigu tas vidinis elementas yra paveiksliukas, jį galima perkelti į foną ir uždėti background-position: 50% 50%;, tačiau kartais tiesiog nėra techninės galimybės nenaudoti <img>, o galbūt kai kam kiltų noro ir žaisti su kitokiais elementais.