How to disable mignifying glass on ipad
body { -webkit-touch-callout: none; }
Tag Archives: Css
Media query – Retina displays
@media (min–moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { /* Retina rules! */ } #my-image {background-image : url(low.png);} @media only screen and (min-device-pixel-ratio: 1.5) { #my-image {background-image : url(high.png);} }
CSS Best Practises
https://developers.google.com/speed/docs/best-practices/rendering
Conditional styles for IE6 and 7
<!–[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css"> <![endif]–>
Checking if element matches CSS selector element.matchesSelector()
var el = document.getElementById("foo"); if (el.matchesSelector("#foo")) { //do something } Prefixes el.mozMatchesSelector("#foo") el.webkitMatchesSelector("#foo") el.msMatchesSelector("#foo") el.oMatchesSelector("#foo") Suppored in all browsers.(IE9+)
Dealing with IE bugs if you keep all styles in one file
IE6: * html .input { margin-top:1px; } IE7: *:first-child+html .input_box { margin-top:1px; } IE8: @media \0screen { .color {color: #F00;} }
Modernizr
Use it if you need to detect browser features or add conditional script loading. http://www.modernizr.com/
Gradient Scanner
This is a website-tool that analyzes the image file searching gradients and creates css rule for it. http://gradient-scanner.com/
Drag & Drop in few lines of code
Implementing possiblity of moving elements on website seems to be hard for person with little experience with Javascript. Only thought is “i need to use some library”, it’s realy good idea… ? when we want add only one feature ? Probably not… I’ll show You 30 lines of code which does it. Download files View… Read More »