Help
RSS
API
Feed
Maltego
Contact
Domain > www.cssmojo.com
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2014-06-03
141.101.116.193
(
ClassC
)
2024-08-09
188.114.232.26
(
ClassC
)
Port 80
HTTP/1.1 301 Moved PermanentlyServer: nginx-rcDate: Fri, 09 Aug 2024 03:33:34 GMTContent-Type: text/htmlContent-Length: 174Connection: keep-aliveLocation: https://www.cssmojo.com/ html>head>title>301 Moved Permanently/title>/head>body>center>h1>301 Moved Permanently/h1>/center>hr>center>nginx-rc/1.25.3.2/center>/body>/html>
Port 443
HTTP/1.1 200 OKServer: nginx-rcDate: Fri, 09 Aug 2024 03:33:35 GMTContent-Type: text/html; charsetUTF-8Content-Length: 101966Connection: keep-aliveVary: Accept-EncodingLink: https://www.cssmojo.com/wp-json/>; relhttps://api.w.org/, https://www.cssmojo.com/wp-json/wp/v2/pages/1>; relalternate; typeapplication/json, https://www.cssmojo.com/>; relshortlinkX-Frame-Options: SAMEORIGINX-XSS-Protection: 1; modeblockX-Content-Type-Options: nosniffX-RunCloud-SRCache-Fetch: HITX-RunCloud-SRCache-Store: BYPASSX-RunCache-Type: srcache !DOCTYPE html>html langen-us>head> meta charsetUTF-8> title>cssmojo/title> meta nameviewport contentwidthdevice-width,initial-scale1,minimal-ui> link hrefhttp://fonts.googleapis.com/css?familyEconomica:700 relstylesheet> meta namedescription contentA blog about HTML, CSS, JavaScript, Web Standards, and Accessibility.> !-- android --> meta namemobile-web-app-capable contentyes> !-- iOS --> meta nameapple-mobile-web-app-capable contentyes> meta nameapple-mobile-web-app-status-bar-style contenttranslucent-black> meta nameapple-mobile-web-app-title contentCSS MOJO> meta http-equivcleartype contenton> link relalternate typeapplication/rss+xml titleRSS hrefhttps://www.cssmojo.com/rss.xml> link relshortcut icon hrefhttp://cssmojo.com/favicon.ico> style>@font-face{font-family:mojo-glyphs;src:url(https://www.cssmojo.com/files/assets/fonts/mojo-glyphs.eot);src:url(https://www.cssmojo.com/files/https://www.cssmojo.com/files/assets/fonts/mojo-glyphs.eot#iefix) format(embedded-opentype),url(https://www.cssmojo.com/files/assets/fonts/mojo-glyphs.woff) format(woff),url(https://www.cssmojo.com/files/assets/fonts/mojo-glyphs.ttf) format(truetype),url(https://www.cssmojo.com/files/assets/fonts/mojo-glyphs.svg) format(svg)}html { font-size:62.5%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; overflow-y:scroll; overflow-x:hidden;}body { font:18px/1.5 Palatino,Palatino LT STD,Palatino Linotype,Book Antiqua,Georgia,serif; font-size:1.8rem; overflow-x:hidden; color:#333; background:#fbfbfb; min-height:100%; position:relative; margin:0; padding:0 1rem 3em 7rem;}#Header { width:6rem; position:fixed; overflow-y:auto; z-index:4; top:0; left:0; bottom:0; box-shadow:0 0 3px #999; background:#f5f5f5;}#Header a { border-bottom:1px solid #ececec; color:#999!important; text-decoration:none!important; opacity:.33; outline:0; -webkit-transition:color .3s; transition:color .3s;}#Header a:focus,#Header a:active,#Header:hover a { opacity:1;}#Header:hover a { border-bottom:1px solid #ccc;}#Header .i-search:hover,#Header .i-search:focus,#Header .i-search:active { color:#4183C4!important;}#Header .i-github:hover,#Header .i-github:focus,#Header .i-github:active { color:#333!important;}#Header .i-linkedin:hover,#Header .i-linkedin:focus,#Header .i-linkedin:active { color:#1985BC!important;}#Header .i-twitter:hover,#Header .i-twitter:focus,#Header .i-twitter:active { color:#00ACEE!important;}#Header .i-feed:hover,#Header .i-feed:focus,#Header .i-feed:active { color:#FE9900!important;}#Header .i-flickr:hover,#Header .i-flickr:focus,#Header .i-flickr:active { color:#FF0084!important;}#Header .i-google-plus:hover,#Header .i-google-plus:focus,#Header .i-google-plus:active { color:#DD4B39!important;}#Header .i-mail:hover,#Header .i-mail:focus,#Header .i-mail:active { color:#3CB371!important;}#Header .Icon b { color:#999!important;}.Reset,.Reset li { margin:0; padding:0;}#SkipLink { border:0; font-size:0;}#SkipLink a { position:absolute; left:-10em;}#SkipLink a:focus,#SkipLink a:active { color:#333!important; position:static; font-size:3.2rem;}.Icon { font-family:mojo-glyphs; speak:none; font-style:normal; font-weight:400; font-variant:normal; text-transform:none; font-size:3.2rem; vertical-align:middle; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}.i-right-arrow:before { content:\e603;}.i-twitter:before { content:\e607;}.i-search:before { content:\e605;}.i-about:before { content: \f483;font-size: 45px;font-family: dashicons;}.i-mail:before { content:\e604;}.i-feed:before { content:\e606;}.i-linkedin:before { content:\e61e;}.i-google-plus:before { content:\e60b;}.i-flickr:before { content:\e610;}.i-github:before { content:\e60f;}#Logo { max-width:100%; margin-bottom:50px;}#Main { outline:0; border:0; box-shadow:none; _width:52rem; padding-bottom:2em; margin-top:2rem;}#Articles { max-width:100%!important; width:52rem!important; margin-right:auto!important; margin-left:auto!important;}#Articles li { list-style-position:inside;}b { font-weight:400;}img { border:0; vertical-align:bottom; -ms-interpolation-mode:bicubic; max-width:100%;}.Py-10 { padding-top:10px; padding-bottom:10px;}.Px-20 { padding-left:20px; padding-right:20px;}.Ta-c { text-align:center;}.Fw-b { font-weight:700;}.Pos-r { position:relative;}.Pos-a { position:absolute;}.TextHidden { text-indent:-999em; overflow:hidden; zoom:1;}.My-6 { margin-top:6px; margin-bottom:6px;}.Fz-l { font-size:1.8rem;}.Lh-11 { line-height:1.1;}h3 { font-size:2.4rem;}.Mt-0 { margin-top:0;}.Fl-start { float:left;}.Mend-10 { margin-right:10px;}.article a { outline:0!important; text-decoration:none!important;}.article a:focus,.article a:active,#Logo a:focus,#Logo a:active { outline:thin dotted!important;}h1,h2,h3,h4,h5,h6 { line-height:1.25; color:#B2361E; font-family:Economica,Tahoma,Arial, sans-serif; -webkit-text-rendering:optimizeLegibility; -moz-text-rendering:optimizeLegibility; -ms-text-rendering:optimizeLegibility; -o-text-rendering:optimizeLegibility; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -ms-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased; font-weight:400;}#Main h2 { font-size:4rem;}#Articles h2 a:visited { color:#CCC!important;}.tags li { list-style:none;}.tag a:link,.tag a:visited { zoom:1; border-radius:2px; font-weight:700; font-size:12px; font-family:sans-serif; border:0!important; background-color:#4183C4; color:#fff!important; text-shadow:0 1px 0 rgba(0,0,0,0.7); white-space:nowrap; font-style:normal; display:inline-block; margin-right:5px; text-decoration:none; text-transform:uppercase; -webkit-font-smoothing:antialiased; padding:2px 6px 0;}.tag a:hover,.tag a:focus,.tag a:active { background-color:#4aa4ee; text-shadow:0 -1px 0 rgba(0,0,0,.2);}.Grid-U { display:inline-block; zoom:1; letter-spacing:normal; word-spacing:normal; text-rendering:auto; vertical-align:top;}.Btn { display:inline-block; zoom:1; font-family:Helvetica Neue,Arial,Helvetica,sans-serif; cursor:pointer; vertical-align:middle; min-height:1em; background-color:#4183c4; color:#FFF!important; border:0!important; -webkit-transition:border-radius .3s; -moz-transition:border-radius .3s; -ms-transition:border-radius .3s; transition:border-radius .3s; border-radius:3px; font-size:1rem; text-transform:uppercase; font-weight:700; text-shadow:0 0 1px #000; -webkit-tap-highlight-color:transparent; padding:.8em 1.5em;}.Btn:hover,.Btn:focus,.Btn:active { border-radius:100px;}a:link,a:visited { color:#4183c4; text-decoration:none;}.Fs-i { font-style:italic;}.Fz-2xs { font-size:.9rem;}.Mt-20 { margin-top:20px;}.Pt-20 { padding-top:20px;}.article.Border-Separate { margin-top:40px; padding-top:40px; border-top:1px solid #CCC;}#Main a:link:hover { border-bottom:1px dotted;}blockquote p,blockquote ul,blockquote dl { font-size:2rem; margin:.25rem 0;}blockquote cite { position:absolute; left:10px; bottom:0; font-size:xx-small;}blockquote cite:before { content:— ; color:#333;}#Main blockquote { box-sizing:border-box; position:relative; font-style:italic; border-left:6px solid rgba(0,0,0,0.1); border-right:6px solid rgba(0,0,0,0.1); margin-top:2.2rem; margin-bottom:2.2rem; padding:0 2rem 2rem;}code { border:1px solid #eee; background-color:#fff; color:#B2361E; border-radius:3px; font-family:Consolas,Liberation Mono,Courier,monospace; font-size:1.6rem; line-height:1; white-space:nowrap; display:inline; zoom:1; padding:0 3px 2px;}h2 abbr { font-family:sans-serif; font-style:italic;}#Footer { bottom:0; left:6em; right:0;}#SkipLink a:focus b,#SkipLink a:active b,.Fz-xs { font-size:1.1rem;}#Logo a,.D-b { display:block;}#Main h2 a,#Main h3 a,#Main h4 a,#Main h2 a { border:none!important; display:block;}@media only screen and (max-width:50em) { body { padding-top:5em; padding-left:1rem; }#Header { position:absolute; display:table; width:105%; box-shadow:none; }#MainNav { display:table-row; }#MainNav li { display:table-cell; border-left:1px solid #ececec; }#MainNav a { opacity:1; }#Header b { top:-100px; }.Border-Separate { margin-top:20px; padding-top:20px; }#Logo { margin-bottom:30px; }}@media only screen and (max-width:36em) { html { font-size:59%; }#Main h2 { font-size:3rem; }}@media only screen and (max-width:45em) and (orientation:portrait) { .googleplus,.flickr { display:none!important; }}@media only screen and (max-width:36em) and (orientation:portrait) { .github,.googleplus,.flickr { display:none!important; }#MainNav .Icon b { position:absolute; top:-100px; }}@media only screen and (max-width:41em) and (orientation:portrait) { #Main blockquote { margin-left:0; margin-right:0; }}/style> link relprefetch hrefhttp://cssmojo.com/assets/css/app.css> !--if lt IE 9> link relstylesheet href/assets/css/ielt9.css> !endif-->meta namerobots contentmax-image-preview:large />script typetext/javascript>/* !CDATA */window._wpemojiSettings {baseUrl:https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/,ext:.png,svgUrl:https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/svg\/,svgExt:.svg,source:{concatemoji:https:\/\/www.cssmojo.com\/wp-includes\/js\/wp-emoji-release.min.js?verebf44ec62e698e772642594786f34079}};/*! This file is auto-generated */!function(i,n){var o,s,e;function c(e){try{var t{supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var tnew Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return ert})}function u(e,t,n){switch(t){caseflag:return n(e,\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f,\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f)?!1:!n(e,\ud83c\uddfa\ud83c\uddf3,\ud83c\uddfa\u200b\ud83c\uddf3)&&!n(e,\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f,\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f);caseemoji:return!n(e,\ud83d\udc26\u200d\u2b1b,\ud83d\udc26\u200b\u2b1b)}return!1}function f(e,t,n){var rundefined!typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement(canvas),ar.getContext(2d,{willReadFrequently:!0}),o(a.textBaselinetop,a.font600 32px Arial,{});return e.forEach(function(e){oet(a,e,n)}),o}function t(e){var ti.createElement(script);t.srce,t.defer!0,i.head.appendChild(t)}undefined!typeof Promise&&(owpEmojiSettingsSupports,sflag,emoji,n.supports{everything:!0,everythingExceptFlag:!0},enew Promise(function(e){i.addEventListener(DOMContentLoaded,e,{once:!0})}),new Promise(function(t){var nfunction(){try{var eJSON.parse(sessionStorage.getItem(o));if(objecttypeof e&&numbertypeof e.timestamp&&(new Date).valueOf()e.timestamp+604800&&objecttypeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if(undefined!typeof Worker&&undefined!typeof OffscreenCanvas&&undefined!typeof URL&&URL.createObjectURL&&undefined!typeof Blob)try{var epostMessage(+f.toString()+(+JSON.stringify(s),u.toString(),p.toString().join(,)+));,rnew Blob(e,{type:text/javascript}),anew Worker(URL.createObjectURL(r),{name:wpTestEmojiSupports});return void(a.onmessagefunction(e){c(ne.data),a.terminate(),t(n)})}catch(e){}c(nf(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supportstet,n.supports.everythingn.supports.everything&&n.supportst,flag!t&&(n.supports.everythingExceptFlagn.supports.everythingExceptFlag&&n.supportst);n.supports.everythingExceptFlagn.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady!1,n.readyCallbackfunction(){n.DOMReady!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(en.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings);/* > *//script>style idwp-emoji-styles-inline-css typetext/css> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; }/style>style idclassic-theme-styles-inline-css typetext/css>/*! This file is auto-generated */.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}/style>style idglobal-styles-inline-css typetext/css>body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}/style>link relstylesheet idcollapse-css hrefhttps://www.cssmojo.com/assets/blocks.css?verebf44ec62e698e772642594786f34079 typetext/css mediaall />link relstylesheet idelementor-icons-css hrefhttps://www.cssmojo.com/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver5.30.0 typetext/css mediaall />link relstylesheet idelementor-frontend-css hrefhttps://www.cssmojo.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver3.22.3 typetext/css mediaall />link relstylesheet idswiper-css hrefhttps://www.cssmojo.com/wp-content/plugins/elementor/assets/lib/swiper/v8/css/swiper.min.css?ver8.4.5 typetext/css mediaall />link relstylesheet idelementor-post-1077-css hrefhttps://www.cssmojo.com/wp-content/uploads/elementor/css/post-1077.css?ver1719578146 typetext/css mediaall />link relstylesheet idelementor-global-css hrefhttps://www.cssmojo.com/wp-content/uploads/elementor/css/global.css?ver1719578146 typetext/css mediaall />link relstylesheet idgoogle-fonts-1-css hrefhttps://fonts.googleapis.com/css?familyRoboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&displayauto&verebf44ec62e698e772642594786f34079 typetext/css mediaall />link relpreconnect hrefhttps://fonts.gstatic.com/ crossorigin>script typetext/javascript srchttps://www.cssmojo.com/wp-includes/js/jquery/jquery.min.js?ver3.7.1 idjquery-core-js>/script>script typetext/javascript srchttps://www.cssmojo.com/wp-includes/js/jquery/jquery-migrate.min.js?ver3.4.1 idjquery-migrate-js>/script>link relhttps://api.w.org/ hrefhttps://www.cssmojo.com/wp-json/ />link relalternate typeapplication/json hrefhttps://www.cssmojo.com/wp-json/wp/v2/pages/1 />link relshortlink hrefhttps://www.cssmojo.com/ />link relalternate typeapplication/json+oembed hrefhttps://www.cssmojo.com/wp-json/oembed/1.0/embed?urlhttps%3A%2F%2Fwww.cssmojo.com%2F />link relalternate typetext/xml+oembed hrefhttps://www.cssmojo.com/wp-json/oembed/1.0/embed?urlhttps%3A%2F%2Fwww.cssmojo.com%2F&formatxml />link relcanonical hrefhttps://www.cssmojo.com/ />meta namegenerator contentElementor 3.22.3; features: e_optimized_assets_loading, additional_custom_breakpoints; settings: css_print_method-external, google_font-enabled, font_display-auto>style typetext/css>.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}/style> style typetext/css idwp-custom-css> .aboutme hr { border: none;}.simple .qcopd-single-list ul { border-top: 5px solid #4183c4 !important;}.simple .qcopd-single-list ul li a:hover { background: #fafafa; color: #4183c4 !important; border-bottom: 1px solid #4183c4 !important;}.simple .upvote-section-simple .upvote-btn:hover, .simple li:hover .upvote-btn, .simple li:hover .upvote-count { color: #4183c4;}.qc-grid-item h2 { color: #4183c4;}.frontpage{font-family:auto !important;} /style> /head>body classHome>div idHeader classTa-c> ul idMainNav classReset> li idSkipLink class> a classIcon i-right-arrow D-b Py-10 href#Main titleSkip Link> b classD-b Fz-xs>Skip to Content/b> /a> /li> li class> a classIcon i-search D-b Py-10 hrefhttp://cssmojo.com/search.html titleSearch CSSMOJO> b classD-b Fz-xs>Search/b> /a> /li> li class> a classIcon i-about D-b Py-10 hrefhttp://cssmojo.com/about-me titleAbout me> b classD-b Fz-xs>About me/b> /a> /li> li class> a classIcon i-mail D-b Py-10 hrefmailto:thierry@cssmojo.com titleContact me> b classD-b Fz-xs>Email/b> /a> /li> li class> a classIcon i-feed D-b Py-10 hrefhttp://cssmojo.com/rss.xml titleRSS feed> b classD-b Fz-xs>Feed/b> /a> /li> li class> a classIcon i-linkedin D-b Py-10 hrefhttp://www.linkedin.com/profile/view?id6501257 titleLinkedIn Profile> b classD-b Fz-xs>LinkedIn/b> /a> /li> li classgithub> a classIcon i-github D-b Py-10 hrefhttp://github.com/thierryk titleGitHub Profile> b classD-b Fz-xs>GitHub/b> /a> /li> li class> a classIcon i-twitter D-b Py-10 hrefhttps://twitter.com/thierrykoblentz title@thierrykoblentz> b classD-b Fz-xs>Twitter/b> /a> /li> li classgoogleplus> a classIcon i-google-plus D-b Py-10 Fw-b hrefhttps://plus.google.com/u/0/113371942911449791396/posts titleGoogle+ Profile> b classD-b Fz-xs>Google+/b> /a> /li> li classflickr> a classIcon i-flickr D-b Py-10 hrefhttp://www.flickr.com/photos/thierrykoblentz/ titlePhoto stream> b classD-b Fz-xs>Flickr/b> /a> /li> /ul> /div>p idLogo classTa-c> a hrefhttps://www.cssmojo.com titleHome> img srchttps://www.cssmojo.com/files/img/cssmojo-logo.png width256 height82 altCSSMOJO - Formerly TJKDesign> /a>/p> link relstylesheet typetext/css mediaall hrefhttps://www.cssmojo.com/wp-content/themes/h2ej6ogeagwoua3v3o5us048345/style.css /> div data-elementor-typewp-page data-elementor-id1 classelementor elementor-1> section classelementor-section elementor-top-section elementor-element elementor-element-2950b843 elementor-section-boxed elementor-section-height-default elementor-section-height-default data-id2950b843 data-element_typesection> div classelementor-container elementor-column-gap-default> div classelementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2d0edbdb data-id2d0edbdb data-element_typecolumn> div classelementor-widget-wrap elementor-element-populated> div classelementor-element elementor-element-5b1d5c5 elementor-widget elementor-widget-text-editor data-id5b1d5c5 data-element_typewidget data-widget_typetext-editor.default> div classelementor-widget-container> div idMain aria-labelledbyArticleTitle rolemain tabindex0>h1 classTextHidden Pos-a>List of Articles/h1>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttps://www.cssmojo.com/animated-gif-character-from-vera-john-online-casino/>Animated GIF Character From Vera & John Online Casino/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Note: New project br />br />/p>/div>/li>/ol>/ol>ol reversed classReset>/ol>ol reversed classReset>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/aspect-ratio-using-custom-properties-and-calc/>Preventing Reflow/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>I saw this in my timeline yesterday:br />br />/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/opinions_of_leaders_considered_harmful/>Opinions of Leaders Considered Harmful/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Note: this started as a rebuttal to Jeffrey Zeldman’s piece (Kiss My Classname) but I thought there was more to it, hence the title…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/tab-panel-the-right-way/>Tab Panel, the right way…/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/a11y/>#a11y/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Tab Panels have been my pet peeve for years a href#note1>1/a>, mostly because of the arguments people come up with to em class2wr03ovsa4nbe7whx>rationalize/em> the use of their strong class2wr03ovsa4nbe7whx>companion jump links/strong>./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/a-retort-to-reuse-on-maintainablecss/>Reuse or not reuse…/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>I didn’t have much to do today so I thought I’d take that bait:/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/the-very-latest-clearfix-reloaded/>The very latest clearfix reloaded/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Over 3 years ago I wrote “a hrefhttp://www.cssmojo.com/latest_new_clearfix_so_far/>The very latest new new way to do “clearfix”/a>. Before that, I had written “clearfix Reloaded + overflow:hidden Demystified” on the YUIBlog. And here I am, writing about strong class2wr03ovsa4nbe7whx>clearfix/strong> for the third time!/p>p class2wr03ovsa4nbe7whx>My previous recommendation for modern browsers was to use:/p>p>…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/pure-css-tab-panel/>Pure CSS Tab Panel/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/a11y/>#a11y/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Most Tab Panel widgets rely on a list of jump links followed by “sections”. These links are styled as tabs, while the sections are styled as panels./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/a-grid-drawing-tool/>Drawing with a Grid/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/misc/>#misc/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Now that I have a bit more time on my hands, I picked up drawing again. The a hrefhttp://www.cssmojo.com/files/extras/a-grid-drawing-tool/framed.jpg>first piece I did/a> was for my son’s birthday./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/the-dark-side-of-the-will-change-property/>What nobody tells you about “will-change”/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>TL;DR: do not use code>will-change/code> until all modern browsers are onboard with it (em class2wr03ovsa4nbe7whx>unless you know what you’re doing/em>)./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/atomic-css-on-steroids/>Atomic CSS on Steroids/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>strong class2wr03ovsa4nbe7whx>Update/strong>:/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/how-to-style-a-carousel/>Styling Effective Carousels/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This article is not about designing effective carousels but about em class2wr03ovsa4nbe7whx>styling them effectively/em>. In other words, this is not about UI design but CSS em class2wr03ovsa4nbe7whx>constructs/em> — how carousel items flow, their positioning and dimensions./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/how-to-better-manage-stacking-contexts/>Managing Stacking Contexts in a “hostile” environment/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/javascript/>#javascript/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>small>Note: this is a proposal I recently wrote for Yahoo!. It has been edited for external audience./small>/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/use-radio-buttons-for-single-option/>Progressive Enhancement/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/a11y/>#a11y/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>In Designing an Effective Donate Form Brad Frost recommends using buttons in lieu of radio buttons, citing a tweet from Luke Wroblewski…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/think-for-yourself/>Common practices do not necessarily mean best practices/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This is a post about “recommendations” that I consider bad practices (I am less concerned by their methods than I am about their adoption.) This is my short list:/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/menus-with-a-sliding-marker/>Menus with a sliding marker/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p classFz-2xl>This is a JavaScript-free solution to create a “sliding” marker next to or behind links in vertical or horizontal menus. Something called JQuery MagicLine Navigation on CSS-TRICKS./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/sprites-that-are-pixel-density-agnostic/>Sprites without JS or min-device-pixel-ratio/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This post is about serving a Scalable Vector Graphics (SVG) file in lieu of a “high-resolution” image (@2x). It is an alternative to this:/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/google-fonts-and-analytics/>Google Fonts, Google Analytics, and performance/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Onboarding Google fonts and analytics come at a price. Looking at perf results, I decided to drop both./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/atomic-css/>Challenging CSS Best Practices/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>When it comes to CSS, I believe that the sacred principle of “separation of concerns” (SoC) has lead us to accept strong class2wr03ovsa4nbe7whx>bloat, obsolescence, redundancy, poor caching/strong>, and more. Now, I’m convinced that the only way to improve how we author style sheets is by moving away from this principle./p>p>…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/magic_boxes/>How to make 2 opposite boxes wrap nicely/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This is based on a clever technique that justify-aligns boxes in their container. A fellow named Jason came up with the original trick; I’m only hacking it to achieve a different goal./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/>How to (kinda) “mimic” -webkit-line-clamp in other browsers/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>blockquote>p class2wr03ovsa4nbe7whx>code>-webkit-line-clamp/code> is an unsupported WebKit property that limits the number of lines of text displayed in a block element. In order to achieve the effect, it needs to be combo-ed with a couple of other exotic WebKit properties.br />cite>http://dropshado.ws/post/1015351370/webkit-line-clamp/cite>/p>/blockquote>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/the_side_effects_of_libraries/>Lib and learn?/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/javascript/>#javascript/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Below is a tweet I posted a month ago. It’s mostly a knee jerk reaction to a couple of experiences I had just had./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/wbr-versus-br/>My take on Responsive Line Breaks/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>It is this tweet from Mathias Bynens that made me look into an article titled Responsive Line Breaks./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/latest_new_clearfix_so_far/>The very latest new new way to do “clearfix”/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/bfc/>#bfc/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/clearfix/>#clearfix/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Who would think there is still something to write about em class2wr03ovsa4nbe7whx>clearfix/em>? 🙂/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/the_new_new_image-replacement_techniques/>My thoughts about the latest Image Replacement techniques/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>If you’re in the business of building web sites, chances are that you heard about the latest Image Replacement (IR) techniques:/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/content_dictates_break-points/>Device-Agnostic Approach To Responsive Web Design/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/rwd/>#rwd/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/row_for_grids/>A “row” to use with any grid system/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/float/>#float/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This is a technique to style a box as a row. A block that expands to fill its container, contains floats, and more./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/text-indent_and_inline-elements/>Indentation and inline elements/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>blockquote>p class2wr03ovsa4nbe7whx>The code>text-indent/code> property specifies the indentation of the first line of text in a strong class2wr03ovsa4nbe7whx>block container/strong>.br />cite>http://www.w3.org/TR/CSS2/text.html#indentation-prop/cite>/p>/blockquote>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/enhancing_keyboard_navigation/>Skip Links revisited/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/a11y/>#a11y/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>I believe everybody knows what skip links are and what they are used for. If you don’t, you can check this article that does a recap and explains a short coming associated to the most common technique./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/padding_versus_margin/>Should you use padding or margin to create space between boxes?/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Last week I posted this CSS “tip” on Twitter…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/outline-offset/>Helping users to focus on one form control at a time/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This simple CSS trick can be used to create a mask outside the border box of any focus-able element. It relies on code>outline-offset/code>./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/strive_to_make_content_accessible_to_all/>Did we lose track of the big picture?/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>It seems to me that we are slowly switching from publishing content strong class2wr03ovsa4nbe7whx>for the Web/strong>, to making content accessible to Screen-Readers (SR) – from targeting strong class2wr03ovsa4nbe7whx>users/strong>, to focusing on em class2wr03ovsa4nbe7whx>devices/em> and em class2wr03ovsa4nbe7whx>modern browsers/em>./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/trick_for_rapid_prototyping/>Speed up CSS prototyping/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This is a simple trick to overlay a grid or a mock-up over a page you’re styling (in WebKit). It will also allow you to edit content em class2wr03ovsa4nbe7whx>directly in the browser/em> to see how your layout behaves depending on various lines of text./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/ken-burns-effect/>A Ken Burns effect with CSS/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>blockquote>p class2wr03ovsa4nbe7whx>The Ken Burns effect is a popular name for a type of panning and zooming effect used in video production from still imagery.br />The name derives from extensive use of the technique by American documentarian Ken Burns.br />cite>http://en.wikipedia.org/wiki/Ken_Burns_effect/cite>/p>/blockquote>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/short_css-quiz/>CSS Quiz/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>On April 28, 2011, I published a short CSS quiz via SurveyMonkey. This article discusses the comments I received, the responses, the results, and more./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/I-loved-ie6/>Thank you Internet Explorer/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This is an article I meant to write for a long time, but due to the hysteria about IE6 I thought it would be considered “provocative” and that people would think I’m fishing for comments. But as the end is near, I think it is…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/direction-friendly-navigation-bar/>Direction-friendly Navigation Bar/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>I recently came across a horizontal navigational menu with right-aligned links. As you might expect, it was a list element with code>float:right/code> and the list items with code>float:left/code>. Even though there is nothing wrong with this approach, it inspired me to take this opportunity to discuss directionality for layout./p>p>…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/animated-gif-with-a-jpg-background/>Positioning an animated gif over an image/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>It is a tweet from Ryan Seddon that gave me the idea to use a code>img />/code> element with a background image to reduce the weight of large animated (gif) images./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/what_else_can_we_do_with_data-uri/>What else can we do with data-uri?/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>I started thinking of data-uri as a mean to reduce HTTP requests strong class2wr03ovsa4nbe7whx>and file size/strong>. Then I thought it could be used as a hack to delay the execution of “strong class2wr03ovsa4nbe7whx>downloaded/strong>” scripts./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/styling-elements-with-glyphs-sprites-and-pseudo-elements/>Styling Elements With Glyphs, Sprites and Pseudo-Elements/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>In 2002, Mark Newhouse published the article “Taming Lists”, a very interesting piece in which he explained how to create custom list markers using pseudo-elements. Almost a decade later, Nicolas Gallagher came up with the technique pseudo background-crop which uses pseudo-elements with a sprite./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/thoughts_on_the_new_html_elements_and_surrogate_divs/>html5 elements and surrogate div/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>strong class2wr03ovsa4nbe7whx>TL;DR/strong> Check the demos: Nesting versus Wrapping and HTML5 without Javascript/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/css-border-tricks-with-collapsed-boxes/>CSS Border Tricks with Collapsed Boxes/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>These tricks will help you achieve designs without resorting to the use of images, CSS3 gradient or extraneous markup. By collapsing boxes with zero code>line-height/code> and code>height/code> values, we can display content em class2wr03ovsa4nbe7whx>outside of the content box/em>, over borders./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/hide-content-from-sighted-users/>Clip Your Hidden Content For Better Accessibility/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/a11y/>#a11y/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>There’s a balance between creating a clean, simple visual design and providing accessible content and functionality. One common solution is to provide text to screen readers that is hidden via CSS./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/go_fetch_yourself/>Use efficient CSS selectors/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Using descendant selectors is inneficient, but when your key selector (the rightmost selector) is a strong class2wr03ovsa4nbe7whx>ID/strong> selector, then things get worse./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/glossary-and-table-format/>Glossary and Table Layout/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Today I ran into an old post from Bruce Lawson (via @necolas)./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/base-styles-sheet-for-webkit-based-browsers/>Styling for WebKit-based browsers/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This article discusses the creation of a a hrefhttp://www.cssmojo.com/css-reset_versus_css-starter/ titleSetting rather than Resetting Default Styling>base styles sheet/a> for WebKit-based browsers. A companion table lists all rules found in the abbr titleUser Agent>UA’s/abbr> styles sheet plus rules from a reset, a base and a fonts’ styles sheet./p>p>…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/the-css-position-property/>The CSS position property/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This property applies to all elements. It has five possible values…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/inline-boxes-with-bottom-alignment/>CSS Quick Tip – Inline Boxes with Bottom Alignment/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>The challenge is to keep a submit button at the bottom of a line box, aligned with form controls positioned below their label…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/equal-height-columns-using-borders-and-negative-margins-with-css/>Equal Height Column Layouts with Borders and Negative Margins in CSS/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/layout/>#layout/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>“What? Another “Equal Height Columns” article? Enough already!”. If this is what you think, then think again because this solution is different. It does not rely on any of the usual tricks./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/clearfix-reloaded-overflowhidden-demystified/>clearfix Reloaded + overflow:hidden Demystified/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/bfc/>#bfc/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/float/>#float/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/clearfix/>#clearfix/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>clearfix and code>overflow:hidden/code> may be the two most popular techniques to clear floats without structural markup./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/clearing-floats_and_block-formatting_context/>Another look at enclosing floats inside containers/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/bfc/>#bfc/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/float/>#float/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/clearfix/>#clearfix/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This article is about containing floats without structural markup. It sheds some light on the different methods commonly used and discusses a new technique…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/developing-an-accessible-star-ratings-widget/>Developing an Accessible Star Ratings Widget/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/a11y/>#a11y/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Many ecommerce sites, social networking services, and online communities include rating or assessment features. Soliciting people’s opinion has even become a business model; there are now sites dedicated to rating products, services, businesses, and more./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/block-formatting-contexts/>Block Formatting Contexts/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/bfc/>#bfc/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/float/>#float/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>A block formatting context is a box that satisfies at least one of the following…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/clearfix_block-formatting-context_and_hasLayout/>Everything you Know about Clearfix is Wrong/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/bfc/>#bfc/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/float/>#float/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/clearfix/>#clearfix/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Clearfix works like this…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/css-reset_versus_css-starter/>base.css versus reset.css/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/opinion/>#opinion/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>For a long time, the very first line in my style sheets was code>* {margin:0;padding:0;}/code>/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/creating-intrinsic-ratios-for-video/>Responsive videos/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/rwd/>#rwd/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Did you ever want to resize a video em class2wr03ovsa4nbe7whx>on the fly/em>, scaling it as you would an image? Using intrinsic ratios for video, you can. This technique allows browsers to determine video dimensions based on the width of their containing block./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/everything_you_always_wanted_to_know_about_z-index_but_were_afraid_to_ask/>Find out how elements stack and start using low z-index values/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>A few weeks ago I was called to fix a layout issue. A modal window would not show, so I used Firebug to style it using code>position:relative;z-index:9999/code> (because I know people use crazy values). It still didn’t work; so I tried code>999999/code>, but that didn’t help either./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/float-less_css_layouts/>A css layout that does not rely on div, float, clear nor structural hack!/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/layout/>#layout/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>There are many CSS layouts out there. Some rely on abbr titleAbsolutely Positioned>AP/abbr> (Absolutely Positioned) elements, others use floats. The former method is considered bad practice for its lack of flexibility while the latter is a powerful solution in building robust layouts./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/pure_css_dropdown_menus/>Pure CSS Dropdown Menus, take II/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/a11y/>#a11y/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Years ago, I wrote an article about creating del>horizontal CSS dropdown menus/del>. This menu didn’t look nice but it em class2wr03ovsa4nbe7whx>worked/em> very well across browsers. I also believe it was the first one to address an issue related to links hidden by the abbr titleCascading StyleS Sheet>CSS/abbr> “code>position/code>” property. As…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/keyboard_friendly_dom_menu/>A “Keyboard-friendly” Menu./a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/javascript/>#javascript/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>It is easier for keyboard users to navigate through long nested lists (mainly navigation menus) when these are “em class2wr03ovsa4nbe7whx>hidden/em>” through the use of code>display:none/code>; but unfortunately for these users, most web designers/developers choose other techniques to make sure all links are exposed to search engines and assistive devices. For this…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/how_to_style_thumbnail_and_caption/>Using CSS to style thumbnails and captions/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>I think a Definition List is the most appropriate element to use here as we are dealing with a list of elements that are paired./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/how_to_style_a_code_listing/>Using CSS to style a code listing/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>I am using an Ordered List (ol) as I believe it is the most appropriate HTML element to use since we are dealing with a list of code lines for which order matters…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/how-to_use_sprites_with_my_image_replacement_technique/>How to use sprites with my Image Replacement technique/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>#tricks/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This is about replacing a few images with a single one to reduce HTTP requests; but rather than positioning a background image, we are positioning the img element used with this technique./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/png_overlay_with_no_extra_markup/>Stacking two images in one single IMG element makes overlay transparency easy./a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/trick/>#trick/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>It is Aaron Gustafson’s iIR technique that inspired this article…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/toggle_elements/>A perfect faq page/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/javascript/>#javascript/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This is about using a em class2wr03ovsa4nbe7whx>Definition List/em> and the abbr titleDocument Object Model>DOM/abbr> to create a nice abbr titleFrequently Asked Questions>FAQ/abbr> page where clicking on the abbr titleDefinition Term>code>dt/code>/abbr>s (the questions) “toggles” the associated abbr titleDefinition Description>code>dd/code>/abbr>s (the answers)./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/using_real_images_in_menus/>Using the DOM to create clean “graphic” Menus/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/javascript/>#javascript/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>a titleOne of my very first articles hrefhttp://www.cssmojo.com/images_in_table/>Years ago/a> I asked if we needed table markup to contain images used in menus; today I’m wondering if we even need markup for those images 🙂/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/a_perfect_image_replacement_technique/>Using the DOM to automate my Image Replacement technique/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/javascript/>#javascript/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/a11y/>#a11y/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This is about relying on Javascript to implement the method without polluting the markup with code>img/code> elements./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/a_perfect_drop_cap/>Using the DOM with my Image Replacement technique to create Drop Caps on the fly/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/javascript/>#javascript/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/a11y/>#a11y/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Thanks to Michael from Valley Web Designs for suggesting I try the technique to create Drop Caps…/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/conditional_comments/>Conditional Comments/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Microsoft tells us that q>One of the most common operations performed in a Web page is to detect the browser type and version. …. Conditional comments offer certain advantages over scripted browser detection techniques and are also easier to use./q>/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/popup_window_with_no_extra_markup/>Opening Popup Windows with no extra markup/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/javascript/>#javascript/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Popup windows are a hot topic among the web designers’ community. People who are new to the trade struggle to customize them while seasoned web designers argue about their very use./p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/tip/>Image Placement vs. Image Replacement/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/a11y/>#a11y/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This technique is very versatile. Make sure you read the entire article to find out about the many different ways to implement the method. Also, I wrote a few other articles based on this solution:/p>/div>/li>/ol>/ol>ol reversed classReset>ol reversed classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/the_location_object/>uri string and “parameters”/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/javascript/>#javascript/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>This document will show how to pass name and value pairs from one page to another using the browser’s built-in Location object./p>/div>/li>/ol>/ol>ol reversed idArticles classReset>li classarticle Pos-r Py-10 Bd-t Px-20 Border-Separate>h2 classMy-6 Fz-l Lh-11>a hrefhttp://www.cssmojo.com/images_in_table/>Do we need tables?/a>/h2>p classMt-0 Fl-start Mend-10>In:/p>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/html/>#html/a>/li>/ul>/ul>ul classReset tags Grid-U>ul classReset tags Grid-U>li classtag Grid-U>a hrefhttp://www.cssmojo.com/tags/css/>#css/a>/li>/ul>/ul>p>!-- keep the div because Jekyll plugs a paragraph in there -->/p>div classMy-6>p class2wr03ovsa4nbe7whx>Many beginning web designers fail to properly understand inline elements, so when it comes to assembling a sliced image using HTML, they mostly rely on their favorite tool… Da table!/p>/div>/li>/ol>/div> /div> /div> /div> /div> /div> /section> /div> p idFooter classPos-a Ta-c Fs-i Fz-2xs Mt-20 Pt-20>Copyright © Thierry Koblentz. See also CSS-101.org, EZ-CSS.org, JSLINT.it, and SYNTAXHIGHLIGHT.in./p>!-- webfaction -->script typetext/javascript srchttps://www.cssmojo.com/assets/lib/blocks.js?ver1 idcollapse-js>/script>script typetext/javascript srchttps://www.cssmojo.com/assets/lib/analytics.js?ver1 idkk_analytics-js>/script>script typetext/javascript srchttps://www.cssmojo.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver3.22.3 idelementor-webpack-runtime-js>/script>script typetext/javascript srchttps://www.cssmojo.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver3.22.3 idelementor-frontend-modules-js>/script>script typetext/javascript srchttps://www.cssmojo.com/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver4.0.2 idelementor-waypoints-js>/script>script typetext/javascript srchttps://www.cssmojo.com/wp-includes/js/jquery/ui/core.min.js?ver1.13.2 idjquery-ui-core-js>/script>script typetext/javascript idelementor-frontend-js-before>/* !CDATA */var elementorFrontendConfig {environmentMode:{edit:false,wpPreview:false,isScriptDebug:false},i18n:{shareOnFacebook:Share on Facebook,shareOnTwitter:Share on Twitter,pinIt:Pin it,download:Download,downloadImage:Download image,fullscreen:Fullscreen,zoom:Zoom,share:Share,playVideo:Play Video,previous:Previous,next:Next,close:Close,a11yCarouselWrapperAriaLabel:Carousel | Horizontal scrolling: Arrow Left & Right,a11yCarouselPrevSlideMessage:Previous slide,a11yCarouselNextSlideMessage:Next slide,a11yCarouselFirstSlideMessage:This is the first slide,a11yCarouselLastSlideMessage:This is the last slide,a11yCarouselPaginationBulletMessage:Go to slide},is_rtl:false,breakpoints:{xs:0,sm:480,md:768,lg:1025,xl:1440,xxl:1600},responsive:{breakpoints:{mobile:{label:Mobile Portrait,value:767,default_value:767,direction:max,is_enabled:true},mobile_extra:{label:Mobile Landscape,value:880,default_value:880,direction:max,is_enabled:false},tablet:{label:Tablet Portrait,value:1024,default_value:1024,direction:max,is_enabled:true},tablet_extra:{label:Tablet Landscape,value:1200,default_value:1200,direction:max,is_enabled:false},laptop:{label:Laptop,value:1366,default_value:1366,direction:max,is_enabled:false},widescreen:{label:Widescreen,value:2400,default_value:2400,direction:min,is_enabled:false}}},version:3.22.3,is_static:false,experimentalFeatures:{e_optimized_assets_loading:true,additional_custom_breakpoints:true,container_grid:true,e_swiper_latest:true,e_onboarding:true,home_screen:true,ai-layout:true,landing-pages:true},urls:{assets:https:\/\/www.cssmojo.com\/wp-content\/plugins\/elementor\/assets\/},swiperClass:swiper,settings:{page:,editorPreferences:},kit:{active_breakpoints:viewport_mobile,viewport_tablet,global_image_lightbox:yes,lightbox_enable_counter:yes,lightbox_enable_fullscreen:yes,lightbox_enable_zoom:yes,lightbox_enable_share:yes,lightbox_title_src:title,lightbox_description_src:description},post:{id:1,title:cssmojo%20%E2%80%93%20Just%20another%20WordPress%20site,excerpt:,featuredImage:false}};/* > *//script>script typetext/javascript srchttps://www.cssmojo.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver3.22.3 idelementor-frontend-js>/script>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]