Forum Moderators: not2easy
.sprite {
background:url('//example.com/sprite_emoticon.png');
width: 19px;
height: 19px
}
.first { background-position: 0 0 }
// HTML
<div class="sprite first"></div><span style="font-family: Arial; font-size: 140%"><div class="sprite first"></div> <div class="sprite first"></div> Hey!</span>
Have you tried putting the sprite in a span?
it validates, but only because it's sort of tricking the validator.Well, sometimes that’s what you have to do ;) If you weren't supposed to change default displays, never ever, the {display} CSS feature would not exist.
<font style="font-family: Arial">
<b>
<div>csdude55: Hey there!</div>
<div>lucy24: Hey there, yourself!</div>
</b>
</font>
tt
abbr
acronym
cite
code
dfn
kbd
samp
var
bdo
qq { quotes: none }
q:before,q:after { content: '' }
Can you see any reason why I couldn't/shouldn't use one of them instead of a SPAN and style it to always represent an emoji?I have a strong feeling this is Strictly Forbidden ...
u {text-decoration: none; padding-left: .16em;}
.sprite {
background:url('//example.com/sprite_emoticon.png');
width: 19px;
height: 19px
}
.first { background-position: 0 0 }
// HTML
<img src="xxxx" class="sprite first" alt="">// This is 26 bytes, but I only got it to load once and now it won't load again...?
// from http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=
// This is a 1px transparent gif that does work
// from https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
// Or should I use a 1x1 gif on my server that can be cached?
https://example.com/spacer.gif
data:image
Many years ago I was using a 1x1px clear .gif file where an element needed to have an image as part of a script.
It was fine for its purpose but when I changed the pages to responsive layouts I looked at every resource used and switched to a 1x1px clear .png file because the difference was surprising. Slightly over 800 bytes for the .gif vs. just over 100 bytes for the ,png.
If at all possible, a self-hosted 1x1 .png file can make a difference when the potential usage may mean the image is used repeatedly on any page. Self hosted images will always load faster and as mentioned, can be cached at first load.
BTW, it is possible that the one that won't load for you again was blocked. No matter how tiny, usually only a tracking business would appreciate people using their hosted image. ;)
- Since it's embed into the page, or css (or js) , it avoids network round-trip.
- It benefits from the gz compression of the file in which it's embedded.
- If you have to embed several times the same data:image, keep in mind that the file in which it's embedded is gz compressed, a compression method which handles repeated blocks of characters/bytes. So if you embed 10 times the same data:image block, the first will be stored as it, but the 9 others will be stored on way less bytes.
- If embed into an external CSS or JS , then it's cached with the file too.
// CSS
img .sprite {
content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
}
// HTML
<img class="sprite first" alt="">
emoji
🙂
I thought maybe that was just how they were encodedIn a sense it is how they’re encoded, but it only gets messy if the device and/or database and/or page switches encodings in transit. Picturesque strings like the ones you quoted are almost always the result of something in UTF-8 being reinterpreted as some variant of Latin-1.
Hmph. Where you were about a month ago? LOL
In a sense it is how they’re encoded, but it only gets messy if the device and/or database and/or page switches encodings in transit. Picturesque strings like the ones you quoted are almost always the result of something in UTF-8 being reinterpreted as some variant of Latin-1.
Sorry, I might not have understood correctly what you were really trying to achieve.
