Pure CSS solution. No need for overflow: hidden; on body, which automatically scrolls everything to the top. Make use of overflow: auto; instead.
Category Archives: CSS
Firefox and Placeholder
Turns out Firefox doesn’t work well with a lot of things. :/
:-moz-placeholder { /* Firefox 18- */
color: #aaa;
font-size: 18px;
}
::-moz-placeholder { /* Firefox 19+ */
color: #aaa;
font-size: 18px;
}
Flex with Firefox
<div flex="50"> <p>looooooooooooooong content</p> </div>
When white-space: nowrap; is used, simply putting overflow: hidden; on <p> is not going to stop it from conquering the parent div and overflowing all over the place. Even if the div has a flex-basis: 50%; to protect itself. That div is going to need a overflow: hidden; too.
Nice job, Firefox 34.0.5.
Sticky Footer With CSS
This is really, really nice. Flex. I like it.
How to get a sticky footer when the content is short, and a not-sticky one when it’s long? With pure css. Check it out: Code/Demo.
Firefox Input Unable to Select
Double clicking the text inside input and it doesn’t appear selected. Cursor can’t even be placed at the start of the input. It’s because of this:
-moz-user-select: none;
Either don’t use this on everything(*), or do a counter one on all <input>.
CSS: End Long Line in Ellipsis
How to cut off long single-line text with a nice clean ellipsis?
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
Note: there has to be a limit to the div’s width.
Mac: How to See What Icons are In Font Files, To Be Used in CSS
First, we need the tool–FontLab Studio.
CSS Selector: Nth-Child, First-Child
Say we have html structure like this:
<div id="parent"> <h1></h1> <p></p> <p></p> </div>
What would this selector have selected?
#parent{
p:first-child{}
}
IOS Video Control: Mission Impossible?
I spent 1.5 hours deleting code and comparing and found that JavaScript initiated events just can’t get the video going. One all-mighty Googling [1][2] revealed that, “embedded media cannot be played automatically in Safari on iOS – the user always initiates playback.” Damn.
It looks like a dead end. But wait. How did videojs-youtube managed it?
Samsung S3 Image Blurry Problem
This is a strange bug with S3. Set these both on image tag would do the trick:
opacity:0.999999;
-webkit-backface-visibility: hidden;Unfortunately, the exact same method cause error on S4, and S3 and S4 have the same screen width/height, 320×640. So instead of writing pixel-accurate @media stylesheets, use:
var ua = window.navigator.userAgent.toLowerCase();
window.platform ={
...
isS3: ua.match(/gt\-i9300/i)!==null
}
if (platform.isS3){
$('img').css{'opacity': 0.9999, 'webkitBackfaceVisibility': 'hidden'};
}
PS: Doesn’t work with background image.