In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.
For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.
| #clip p { text-overflow: clip; } | |
| #ellipsis p { text-overflow: ellipsis; } | |
| #ellipsis-multiline p { text-overflow: -o-ellipsis-lastline; } |
| @mixin retina($ratio: 1.5) { | |
| $dpi: $ratio * 96; | |
| $opera-ratio: $ratio * 100; | |
| @media only screen and (-webkit-min-device-pixel-ratio: #{$ratio}), | |
| only screen and ( -o-min-device-pixel-ratio: '#{$opera-ratio}/100'), | |
| only screen and ( min-resolution: #{$dpi}dpi), | |
| only screen and ( min-resolution: #{$ratio}dppx) { | |
| @content; | |
| } |
| code, samp, kbd { | |
| font-family: Consolas, Inconsolata, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; | |
| text-align: left; | |
| color: #555; | |
| } | |
| pre code { | |
| line-height: 1.6em; | |
| font-size: 11px; | |
| } | |
| pre { |
An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.
Everything is broken up by tag, but within each the selectors aren't particularly ordered.
I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A
A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:
-webkit-appearance:none;
| LOCKFILE=/tmp/lock.txt | |
| if [ -e ${LOCKFILE} ] && kill -0 `cat ${LOCKFILE}`; then | |
| echo "already running" | |
| exit | |
| fi | |
| # make sure the lockfile is removed when we exit and then claim it | |
| trap "rm -f ${LOCKFILE}; exit" INT TERM EXIT | |
| echo $$ > ${LOCKFILE} |
| function setEqualHeight(columns) | |
| { | |
| var tallestcolumn = 0; | |
| columns.each( | |
| function() | |
| { | |
| currentHeight = $(this).height(); | |
| if(currentHeight > tallestcolumn) | |
| { |
| var username = 'pankajparashar'; | |
| $.ajax({ | |
| url: 'https://api.twitter.com/1/statuses/user_timeline/' + username + '.json?count=1&include_rts=1&callback=?', | |
| dataType: 'json', | |
| error: function() { alert("Twitter is blocked"); }, | |
| success: function(data) { | |
| var tweet = data[0].text; | |
| tweet = tweet.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, function(url) { |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Box Shadow</title> | |
| <style> | |
| .box { | |
| height: 150px; | |
| width: 300px; | |
| margin: 20px; |
| javascript:void((function(d){if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return false;d.write('<!DOCTYPE HTML><html style="opacity:0;"><head><meta charset="utf-8"/></head><body><a data-viewport="240x240" data-icon="handy">Mobile</a><a data-viewport="320x480" data-icon="mobile">Mobile (e.g. Apple iPhone)</a><a data-viewport="320x568" data-icon="mobile" data-version="5">Apple iPhone 5</a><a data-viewport="600x800" data-icon="small-tablet">Small Tablet</a><a data-viewport="768x1024" data-icon="tablet">Tablet (e.g. Apple iPad 2-3rd, mini)</a><a data-viewport="1024x768" data-icon="display" data-version="17″">17″ Display</a><a data-viewport="1280x800" data-icon="notebook">Widescreen</a><a data-viewport="2560x1600" data-icon="display" data-version="30″">30″ Apple Cinema Display</a><script src="http://lab.maltewassermann.com/viewport-resizer/resizer.min.js"></script></body></html>')})(document)); |