Archief - Responsive bullets in < IE8

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
F

Fonskuh

Legacy Member
Even een klein vraagje, ben bezig aan een site waar ik een list heb met telkens een custom arrow voor. Die afbeeldingen zijn 2x de grootte voor retina schermen waarbij ik gebruik maak van background-size om ze te schalen. Probleem is dat surprise, surprise IE 8 en lager dit niet ondersteunen en de afbeeldingen op volledige grootte tonen.

Code: 
.widget ul li {list-style:none;
font-size:0.9em;
color:#fff;
font-weight:300;
margin:0 0 1em 0;
padding:0 0 15px 25px;
list-style-position:outside;
background:url('../images/arrow.png') no-repeat left 4px;
background-size:12px 12px;
border-bottom:1px solid #782560;}

Er bestaat een fix hiervoor maar die neemt de volledig beschikbare ruimte in, in dit geval niet haalbaar. De afbeelding is dus 24 x 24 die ik schaal naar 12 x 12. Iemand die dit anders aanpakt of het kan oplossen?
D

De Wouter

Legacy Member
Ik heb nog een paar floppy disks liggen, misschien dat je hier je webpagina op kan zetten om te delen met anderen. Vergeet ook geen ponskaarten versie te maken van je website.

Nee serieus, IE8 en lager ondersteunen? Waarom?
F

Fonskuh

Legacy Member
In sommige gevallen is er nog steeds 10-15% verkeer dat via IE8 komt, vind dit nog altijd teveel om zomaar te negeren. Ik heb liever een fallback klaar voor die bezoekers.
-

-BVR-

Legacy Member
Conditional stylesheet en gewone bullets gebruiken voor IE8 en lager?
F

Fonskuh

Legacy Member
Dat ik daar nog niet aan gedacht had, gewoon 1x images gebruiken ipv 2x voor retina (het hoeven dan zelfs geen gewone bullets zijn)... thnx voor de tip :)
T

TheBud

Legacy Member
Je hebt geen toegang tot de HTML ofzo dat je dit absoluut met CSS moet doen? Ik zou image eles in de listitems steken en de src attributes veranderen met javascript naargelang de window width en height. Met pure javascript (Dus geen jQuery) is zo'n kleine aanpassing qua performance heel snel. Lijkt me een pak "compatibeler" dan de pure CSS oplossing.
T

TheBud

Legacy Member
Moto zei:
Als ge < IE 8 gaat ondersteunen, zult ge waarschijnlijk ook browsers met javascript disabled ondersteunen
Klik om te vergroten...

Die javascript hoeft niet te lopen, de fallback is gewoon de standaard src parameter die je meegeeft. Aangezien een <img> altijd perfect scaled en het echt heel heel erg onwaarschijnlijk, zo niet onbestaande lijkt dat je een combinatie ziet van een retina DPI en een browser op IE7, zie ik helemaal geen probleem.
-

-BVR-

Legacy Member
TheBud zei:
Je hebt geen toegang tot de HTML ofzo dat je dit absoluut met CSS moet doen? Ik zou image eles in de listitems steken en de src attributes veranderen met javascript naargelang de window width en height. Met pure javascript (Dus geen jQuery) is zo'n kleine aanpassing qua performance heel snel. Lijkt me een pak "compatibeler" dan de pure CSS oplossing.
Klik om te vergroten...

Dat wordt inderdaad gedaan, maar ik ben er geen fan van. Het CSS attribuut dient er net voor om uw bullets te maken. Het is niet de bedoeling om HTML-elementen als bullet items te gebruiken.
T

TheBud

Legacy Member
BramVanroy zei:
Dat wordt inderdaad gedaan, maar ik ben er geen fan van. Het CSS attribuut dient er net voor om uw bullets te maken. Het is niet de bedoeling om HTML-elementen als bullet items te gebruiken.
Klik om te vergroten...

Inline elementen zoals anchors, spans en images zijn perfect OK in een listitem. De meeste navigaties op websites zijn inline anchors in listitems. Die hun standaard behaviours zijn zo ingebakken in de browser dat je ook 100% future-proof bent. Dus voor mij lijkt het de beste oplossing.

Ik ga akkoord dat de css attribuut voor custom bullets moet kunnen gebruikt worden. Maar dat is nu eenmaal the nature of the beast, ik wacht zelf echt al een eeuwigheid op een deftige implementatie van de grid layout. Grappig genoeg wordt die momenteel enkel nog maar ondersteund door Internet Explorer, voor mij toch de belangrijkste nieuwe CSS3 feature.

Voor deftige layouts zitten we voor mijn part nog altijd in hetzelfde tijdperk als IE8 met zijn html tables. CSS positioning is gewoon niet goed genoeg.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan