Miten teimme kuvakaappauksen ilman kuvakaappauksia
Joskus palaute on helpompi näyttää kuin kuvailla. Ota elementin valinta käyttöön kyselylle, ja vierailija voi osoittaa yhtä tiettyä sivun osaa — painiketta, otsikkoa, lomakekenttää — sen sijaan että kirjoittaisi "se sininen painike ylhäällä". Vastauksen tiedoissa saat siistin, täysin tyylitellyn kuvan juuri siitä elementistä, koko sivun tallenteen rinnalla, jossa se on korostettu.
Sen toteuttaminen tarkoitti sivujen renderöintiä, joita emme omista, verkkotunnuksilla joita emme hallitse, oikean selainmoottorin sisällä — ja yhden elementin oikein tyylitellyn rajauksen palauttamista näiltä sivuilta. Ensimmäinen versio kokeili ilmeisintä tapaa: napata klikatun elementin oma merkintä ja renderöidä vain se, erikseen. Se näytti oikealta jokaisessa kirjoittamassamme testissä, koska jokaisessa testissä elementti oli tyylitelty inline-tyyleillä. Heti kun oikean sivun painike sai ulkonäkönsä ulkoisen tyylitiedoston luokasta, rajaus palautui tyylittömänä. Erillisellä katkelmalla ei ole sivun head-osaa, josta linkittää tyylitiedosto, ei style-lohkoa, ei CSS-muuttujia joihin kyseinen luokka voisi nojata — mikään ei ollut rikki, tyylejä ei vain ollut mihin soveltaa.
Korjaus oli renderöidä koko sivu pelkän elementin sijaan. Valitsin merkitsee klikatun elementin jo valinnan hetkellä, joten renderöimme vierailijan koko tallennetun sivun kerralla, sen oikeilla tyylitiedostoilla ja oikealla asettelulla, ja otamme kaksi kuvakaappausta samasta ladatusta sivusta: koko sivun ja tiukan rajauksen pelkästä merkitystä elementistä. Yksi selaimen sivun lataus tuottaa nyt molemmat kuvat, mikä on myös vähemmän työtä kuin kaksi erillistä renderöintiä, joita aiemmin tarvittiin.
Mikään tästä ei muuta sitä, mitä vierailijat kokevat — he klikkaavat edelleen vain sitä sivun osaa, jota tarkoittavat. Se mikä muuttuu, on se, mitä tapahtuu sen jälkeen: aito, oikein tyylitelty kuva juuri siitä osasta, ei kirjallisesta kuvauksesta koottua arvausta.