Skip to content

Instantly share code, notes, and snippets.

View siggiarni's full-sized avatar

Sigurður Árni Svanbergsson siggiarni

12 followers · 8 following
  • Iceland
View GitHub Profile
@simevidas
simevidas / transition-flex
Last active August 29, 2015 14:01
// Hey! Listen!
// The above slide animation is transition:flex.
// No hard-coded px/% width values!
@media (min-width: 800px)
.services
display flex
.services__item
flex 1
transition flex .25s ease-in-out .1s
@robnyman
robnyman / Fullscreen API, CSS pseudo-class.css
Last active June 29, 2018 10:44
Fullscreen API, CSS pseudo-class
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:-ms-fullscreen {
background: red;
@siggiarni
siggiarni / LESS.sublime-settings
Last active November 9, 2018 10:15
Misc Sublime text settings
// Sublime menu > Preferences > Package Settings > LESS > Settings - User
{
"extensions":
[
"less.css"
]
}
@tkadlec
tkadlec / perf.js
Created April 23, 2015 11:54
Super simple example of adding perf timing to the page display during dev work
(function () {
var perfBar = function(budget) {
window.onload = function() {
window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
var timing = window.performance.timing,
now = new Date().getTime(),
output, loadTime;
@necolas
necolas / ie-cc-1.html
Created May 20, 2011 12:15
Conditional classes test cases: DRYer and Compat View icon is not displayed in IE8/9. If X-UA-Compatible header is set using a server config then ie-cc-serverconfig.html is all that is needed.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<!--[if lt IE 7]><html class="no-js ie6"><![endif]-->
<!--[if IE 7]><html class="no-js ie7"><![endif]-->
@necolas
necolas / ie-css-hacks.css
Created May 20, 2011 15:10
IE CSS hacks
/*
* Property prefix hacks
*/
/* IE6 only - any combination of these characters */
_ - £ ¬ ¦
/* IE6/7 only - any combination of these characters */
@Andy-set-studio
Andy-set-studio / index.html
Created November 1, 2019 14:28
Button with visually hidden text
<button>
<span class="visually-hidden">Some text to announce</span>
<!-- your icon or whatever -->
</button>
@mathiasbynens
mathiasbynens / ios-viewport-scaling-bug-fix-original.js
Created April 4, 2011 08:30
Improved version of JavaScript fix for the iOS viewport scaling bug. See http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
// Original code from http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
@5t3ph
5t3ph / element-classes-and-ids-vanilla.css
Last active January 25, 2022 04:06
Tag HTML elements with their class names and IDs to visualize page structure
*[class],
*[id] {
position: relative;
outline: 2px dashed red;
}
*[class]::before, *[class]::after,
*[id]::before,
*[id]::after {
position: absolute;
@stowball
stowball / wp8-ie10-fix.js
Last active April 17, 2022 19:09
Microsoft's stop-gap solution to fix IE 10 & 11's viewport on Windows Phone 8. I've also added another condition so it won't run on other browsers that spoof the user agent. Details: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();