Moi, miten tekisin, että minulla on vaikka div:
<div id="star_ratings"></div>
Ja taustakuvana on viisi harmaata tähteä. Tietokannasta haetaan prosenttimäärä tähdistä (esim. 70%/100%), jolloin keltaisia tähtiä pitäisi näkyä 70%, loput harmaata. Prosenttimäärä vaihtelee, jolloin en voi vain tehdä sitä kuvankäsittelyohjelmalla. Olen tälläistä nähnyt jossain, mutta en muista miten, eikä Googlatuskaan auta.
Kuvia on siis kahdenlaista: viiden tähden sarja harmaana ja viiden tähden sarja keltaisena. Eli keltaisia tähtiä ei ole viisi, vaan kysymys on vain, että kuvat saisi päällekkäin ja keltainen olemaan vain x prosentti.
Vaikea selittää... Toivottavasti tajusitte...
Google löysi toisena tuloksena haulla "css fractional star rating" tämän esimerkin: http://salman-w.blogspot.fi/2012/08/star-ratings-using-css-sprites.html
Kiitos paljon tossu! Auttoi todella paljon, jopa tähtikuvat oli samanlaisia mitä ajattelin...
joah kirjoitti:
Tietokannasta haetaan prosenttimäärä tähdistä (esim. 70%/100%), jolloin keltaisia tähtiä pitäisi näkyä 70%, loput harmaata. Prosenttimäärä vaihtelee, jolloin en voi vain tehdä sitä kuvankäsittelyohjelmalla.
Millaisen alt-tekstin ajattelit kirjoittaa kuvalle? Jos et keksi mitään järkevää tapaa, niin koko lähestymistapa on todennäköisesti väärä.
Tähtien esittäminen yli ½ tähden tarkkuudella on turhaa hifistelyä. Todellisessa datassa tuskin on luotettavuutta edes ½ tähden vertaa. Silloin harvoin kun on, kannattaa esittää tieto desimaalilukuna, kuten esimerkiksi IMDb tekee (ei esimerkiksi 7,6 tähteä, vaan iso tähti, jossa on ”7.6”).
Jos lähdetään maksimissaan ½ tähden tarkkuudesta, riittää 11 kuvaa, ja niille voidaan kirjoittaa järkevät alt-tekstit. Ja tätä varten tietysti pyöristetään prosenttiluku täysiksi kymmeniksi prosenteiksi.
No eikö järkevä alt -teksti vaikka 78%:lle olisi "3,9 tähteä". Sovelsin ihan prosentin jakamista 20:llä ja pyöristämistä 1 desimaalille.
Miksi haetun ja kuvatun kaltainen viritys estäisi tämän käytön?
Grez kirjoitti:
No eikö järkevä alt -teksti vaikka 78%:lle olisi "3,9 tähteä".
Ei, mutta ”3,9 tähteä viidestä” voisi olla, jos välttämättä halutaan 0,1 tähden esitystarkkuus.
lainaus:
Miksi haetun ja kuvatun kaltainen viritys estäisi tämän käytön?
No esimerkiksi ”tossun” mainitsemalla sivulla viritys tehdään kahdella sisäkkäisellä span-elementillä ja niiden taustakuvina. Siihen ei voi sitten laittaa mitään alt-määritteitä.
No ei voi alt-tekstiä laittaa mutta titlen kuitenkin. Alt-attribuutti lienee muutenkin hyödyttömämpi kuin title.
Leikinpä tähdellistä: http://codepen.io/Merri/pen/iCwrK
<span class="rating" data-rating="70" data-star="★★★★★">Meidän arvosanamme: 70 pistettä sadasta</span>
.rating {
color: #AAA;
color: rgba(0, 0, 128, .1);
display: inline-block;
font-size: 0;
position: relative;
}
.rating:before,
.rating:after {
content: attr(data-star);
display: inline-block;
font-size: 32px;
font-size: 2rem;
pointer-events: none;
}
.rating:before {
color: #C70;
color: rgba(224, 128, 0, .6);
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.rating:after {
text-shadow: -1px 0px 0 rgba(255, 255, 255, .6),1px 1px 0 rgba(0, 0, 0, .6);
}
.rating[data-rating="70"]:before {
width: 70%;
}- Vain yksi elementti
- Järkevä kuvausteksti sisällä
- Ei kuvia
- Näyttää ihan hyvältä
- Helppo muokata, tähtiä voi lisätä tai poistaa vaivatta
- Hups, se toimii IE8+
Tarvii vaan generoida aika paljon CSS:ää jos tahtoo tukea kaikki arvot nollasta sataan. Tosin moinen satsi kyllä pakkautuisi aika hyvin.
Merri kirjoitti:
Leikinpä tähdellistä: http://codepen.io/Merri/pen/iCwrK
Tälle kyllä plussa. Yksinkertainen ja nätin näköinen, toimii!
Ja tähän offtopic-aiheeseen.
Mielestäni parempi laittaa "normaalit" linkit, että käyttäjällä on mahdollisuus valita miten linkin aukaisee.
The Alchemist kirjoitti:
No ei voi alt-tekstiä laittaa mutta titlen kuitenkin. Alt-attribuutti lienee muutenkin hyödyttömämpi kuin title.
Taidat olla hirtehisellä parodiatuulella.
Jos nyt joku erehtyi ottamaan sen tosissaan, kannattaa lukea esimerkiksi
http://webaim.org/techniques/alttext/
Lisäys:
Merri kirjoitti:
Leikinpä tähdellistä: http://codepen.io/Merri/pen/iCwrK
<span class="rating" data-rating="70" data-star="★★★★★">Meidän arvosanamme: 70 pistettä sadasta</span>
Leikkinä ihan hauska. Oikeassa käytössä tulisi ensimmäisenä vastaan se, että ”★” sisältyy suhteellisen harvoihin fontteihin (ja vaihtelee kooltaan aika lailla).
lainaus:
Tarvii vaan generoida aika paljon CSS:ää jos tahtoo tukea kaikki arvot nollasta sataan. Tosin moinen satsi kyllä pakkautuisi aika hyvin.
Etenkin kun nollasta sataan on ylinumeroituvasti ääretön määrä arvoja. ☺ Mutta vaikka rajoituttaisiin kokonaislukuihin, CSS-koodista tulisi aika tylsää, joten eiköhän tuossa käytettäisi JavaScriptiä. Ja silloin homman voi toki tehdä suoremmin, esimerkiksi korvaamalla span-elementin kuvalla.
Yucca kirjoitti:
”★” sisältyy suhteellisen harvoihin fontteihin (ja vaihtelee kooltaan aika lailla).
Teoriana ihan hauska. Kyllähän se sama tähti aina ilmestyy vaikka fonttia vaihtelee. Kokokin pysyy pitkälle täsmälleen samana. Tahtoisinpa nähdä kyseisen esimerkin rikottuna pelkästään fonttia vaihtamalla... vaan en tule näkemään! ;)
Mutta onko tämä nyt sitten tylsää:
@for $i from 0 through 100 {
.rating[data-rating="#{$i}"]:before {
width: #{$i}#{'%'};
}
}CSS:n esiprosessointi on aika ihkua.
JavaScriptillä en kyllä alkaisi span-elementtiä korvata yhtään millään. Ihan turhaa suorituskyvyn (ja koodin) haaskausta heittää DOMiin asti muutoksia näin yksinkertaisen asian tähden. Muutenkin nykyisin alkaa sivuilla olla JavaScriptillä tekemistä enemmän kuin tarpeeksi. Tähtien esittäminen on HTML:n ja CSS:n yhteistyön heiniä.
Merri kirjoitti:
Yucca kirjoitti:
”★” sisältyy suhteellisen harvoihin fontteihin (ja vaihtelee kooltaan aika lailla).
Teoriana ihan hauska. Kyllähän se sama tähti aina ilmestyy vaikka fonttia vaihtelee. Kokokin pysyy pitkälle täsmälleen samana.
Katsopa esimerkiksi vaihtelua sivulta
http://www.fileformat.info/info/unicode/char/
Jos et huomaa tai myönnä fonttiongelmaa, niin sinulla on isompi fonttiongelma, koska silloin koodissasi ei ole font-family-määrittelyä, vaan tähdille käytettävä fontti jää selaimen arvottavaksi.
lainaus:
Mutta onko tämä nyt sitten tylsää:
@for $i from 0 through 100 { .rating[data-rating="#{$i}"]:before { width: #{$i}#{'%'}; } }
Ehkäpä ei, mutta puhe oli CSS:n tylsyydestä.
lainaus:
JavaScriptillä en kyllä alkaisi span-elementtiä korvata yhtään millään. Ihan turhaa suorituskyvyn (ja koodin) haaskausta heittää DOMiin asti muutoksia näin yksinkertaisen asian tähden.
(DOMin muuttaminen sillä tavoin on kyllä yksinkertaisempaa ja robustimpaa, varmimmin eri selaimissa toimivaa kuin CSS:llä generoitava sisältö. Tietysti jos nimenomaisena tarkoituksena on estää toimivuus joissakin vanhoissa selaimissa, niin sitten mutkikkuus voi olla oikeutettua...)
Kun nyt yksinkertaisuuteen päästiin, niin mikä siis oli vikana siinä, että on pienehkö joukko kuvia, joissa kussakin on sopiva määrä tähtiä? Sekinhän on toki jo mutkikasta verrattuna sellaisiin ilmauksiin kuin ”3/5”, mutta ehkä havainnollisuuden takia perusteltua. Osittain väritettyjen tähtien idea kai oikeasti on vain osoittaa ”mä osaan [kopioida kikkoja]”, mutta lähinnähän ne näyttävät siltä, että maalaaminen on jäänyt kesken.
Mutta mikä se ongelma oli? Vaihtelua fonttien koossa on, mutta merkki näkyy kaikilla fonteilla. Sivuilla käytettäessä tähtien koon mukautuvuus käytettyyn fonttiin on ihan hyvä asia: fontin voi vaihtaa ja tähdet pysyvät suhteellisesti saman kokoisina tekstiin nähden. Joten odottaisin edelleen näyttöä siitä, että esimerkki ei toimi tilanteessa X, koska fontti.
CSS:n "tylsyys" taas on aika heikko perustelu sille, ettei sitä kirjoiteta. Onhan vaikka C-koodissa jokin hirmuisen pitkä vakioiden lista aika tylsä, eikä sitä aleta heittää muuttujiksi tai funktioilla generoiduksi vain sen takia että siitä saisi jännempää.
JavaScriptin käytön perustelu taas vanhojen selaimien tuella kuulostaa vielä hullummalta! Ei siihen tarvitse mitään JS:ää missään vaiheessa: jos tahdot tähdet kuvana niin sitten tökkäät kuvan HTML:ään ja se on sillä selvä. DOMia on turha mulkata jälkikäteen tähtien takia jos ei ole tekemässä niiden kanssa mitään interaktiivista.
Osittain väritetyissä tähdissä ehkä puolikkaat toimivat vielä varsin järkevästi. Siitä voin olla samaa mieltä, että mielivaltaiset osuudet on vähän niin ja näin. CSS:llä on kuitenkin muitakin mahdollisuuksia, esimerkiksi tähtien värityksen animointi voisi olla ihan kiva pieni efekti tietyssä tilanteessa. Ei välttämättä hyödyllinen tai aukottomasti järjellisesti perusteltavissa, mutta joskus asioiden on myös hyvä tuntua ja näyttää kivalta.
Ohjelmakoodin emulointi css:llä vain vanhanaikaisuuden nimissä on minustakin huono veto. Ei se ole "tylsää" vaan tyhmää ja bloattia. Noh, tekeväthän sellaista c-kääntäjätkin optimoinnin hengessä... Jos tuolle linjalle haluaa lähteä, niin käyttäisin ennemmin svg:tä.
Css:llä leikkimisessä tosiaan on se vika, että tuki vaihtelee yleisillä selaimilla liikaa. Esim tuo "leikinpä tähdellistä" esimerkkisi kosahtaa androidin vakioselaimella. (harmaat ja kultaiset tähdet näkyy vierekkäin, ei päällekkäin.)
Mikä Androidin versio? 4.4 näyttää oikein.
The Alchemist kirjoitti:
Ohjelmakoodin emulointi css:llä
Mutta eihän tuo CSS emuloi ohjelmakoodia. Ei siinä ole mitään toiminnallista. Ainoastaan monta eri tyyliasetusta. Mikäli sääntöjen määrä häiritsee, niin toistuvia sääntöjä olisi vain kymmenen jos käytössä olisi esimerkiksi vain täydet ja puolikkaat tähdet.
Bloatti taas on aika outo väite, koska tuo sadankin tyylin säännöstö pakkautuu noin 500 tavuun gzipillä ja koko höskä alle kilotavun. Vain todella karun näköiset kuvat saisi ängettyä yhtä pieneen tilaan.
Merri, 4.0.4
ulkoasu näyttää siltä, kuin .rating -luokan font-size: 0 ei olisi asetettu, jolloin tähtimerkit tulee vierekkäin.
.rating {
color: #AAA;
color: rgba(0, 0, 128, .1);
display: inline-block;
/* font-size: 0; */
position: relative;
white-space: nowrap;
}Merri kirjoitti:
The Alchemist kirjoitti:
Ohjelmakoodin emulointi css:llä
Mutta eihän tuo CSS emuloi ohjelmakoodia. Ei siinä ole mitään toiminnallista.
Tietysti tuossa on toiminnallisuutta, koska kyse on dynaamisesta widgetistä. Tarkoitus on siis visualisoida muuttuvaisdataa, olkoonkin että varsinaisen graafin piirtämisen sijaan kyse on vain yksittäisen arvon näyttämisestä.
groovyb, Android 4.0.X taltutettu hajoittamatta muita selaimia. Tulipahan opeteltua uusi jännä tapa piilottaa elementin teksti ja saada pseudoelementtien teksti siitä huolimatta näkyville.
ihan hieno tuo esimerkkisi oli, oli aika jännä tapa hoitaa tuo tähtimerkeillä ja hanskata asia alla olevan ja päälle tulevan elementin leveydellä :) Itse vähän karsastan logiikan siirtämistä css:n puoleen, kun tuota logiikkaa on jo muutenkin sekä kannan, clientin ja serverin päässä... Mutta varmasti tuohon suuntaan ollaan joltain osin menossa.
En näe tässä niitä ongelmia, jotka ilmeisesti enemmän taustajärjestelmäpuolelta ajatteleva näkee, tai on näkevinään. Tuo ideahan on sinänsä järkyttävän yksinkertainen ja samantapainen kuin mitä monet tekevät kahden kuvan avulla.
Haaste ja monimutkaisuus ("logiikka"?) syntyvät ennemminkin siitä, että HTML ja CSS pidetään tiukasti omilla tonteillaan. Kun HTML määritellään tiettyyn yksinkertaiseen rakenteeseen ja kuvien käyttämättömyydestä johtuen mittasuhteet ovat ennestään tuntemattomia, niin se luo CSS:n puolelle monimutkaisuutta varsinkin selainten rajallisuuksien vuoksi. CSS kuitenkin tekee juuri sen mitä sen pitääkin: hoitaa esityspuolen. Loput onkin vain sitä, että ymmärtää ja tietää selainten rajat. Yksi olennainen syy siihen, miksi nykyään on kasvavissa määrin tilausta teknisille fronteille.
lähinnä tuo sotii sen kanssa, että olen tottunut työskentelmään javascriptin kanssa, kun kyse on client puolen dynaamisuudesta. Ei tässä ollut tarkoitus arvostella kenenkään toimintatapoja, itse en vain suosi logiikan (toiminnallisuuksien) hajauttamista. Tässä tapauksessa tähteytyksen toimintaan. itse pidän siitä, että CSS on se mikä se alunperin oli, tyylitiedosto, miltä mikäkin näyttää. se, että luetaan elementin data-attribuutteja css -puolella, on mielestäni logiikan hajauttamista.
Aihe on jo aika vanha, joten et voi enää vastata siihen.