Optimize CSS for http://gknakamura.com/assets/css/main.css

Improve your CSS performance by reducing complexity

Validate CSS for parsing errors and warnings

Check and Cleanup CSS Offenders

  • Complex Selectors5

    Selectors with uneccessary depth and traversal

    Consider simplifying for speed and readability

    .CodeRay .inline .inline .inline {}.CodeRay .string .string .string {}.js .nav .active+ul {}#index article p+p {}.toc li ul li a {}
  • Duplicated Properties53

    Duplicate properties detected for your selector

    Remove or combine duplicate properties to clean up your css

    h1 {font-size: 2rem} h1 {margin-bottom: 1.625rem} h2 {font-size: 1.75rem} h2 {margin-bottom: 1.625rem} h3 {font-size: 1.5rem} h3 {margin-bottom: 1.625rem} h4 {font-size: 1.125rem} h4 {margin-bottom: 1.625rem} h5 {font-size: 1rem} h5 {margin-bottom: 1.625rem} h6 {font-size: .875rem} h6 {margin-bottom: 1.625rem} figcaption {font-size: .875rem} figcaption {line-height: 1.3} .image-credit {display: block} .image-credit {font-size: .75rem} .image-credit {line-height: 1.3} .notice {font-size: .875rem} .footnotes ol, .footnotes li, .footnotes p {font-size: .875rem} p code, li code {font-size: .75rem} pre {font-size: .75rem} .highlight {font-size: .75rem} .CodeRay {font-size: .75rem} .btn, #goog-wm-sb {font-size: .875rem} input[type="file"] {background-color: initial} textarea {overflow: auto} input:focus, textarea:focus {outline: thin dotted \9} .site-name {float: none} .site-name {display: block} .site-name {font-size: 1.5rem} .site-name {font-size: 1rem} .top-navigation {float: none} .top-navigation {display: block} .top-navigation li {border-bottom: 1px solid fade(#111, 10)} .top-navigation li {font-size: 1rem} .nav .navtoogle {font-size: 1.125rem} #main .post, #main .page {width: 83.33333%} #index {width: 83.33333%} #index h2 {font-size: 1.75rem} #index article h3 {font-size: 1.25rem} #index article h3.link-post {margin-bottom: 1.625rem} #index article p {font-size: .875rem} .author-social {font-size: .875rem} .article-author-side {display: inline} .toc {display: inline} .toc h3 {font-size: 1rem} .social-share {margin-bottom: 1.625rem} .social-share a {font-size: .875rem} .social-share h4 {font-size: .875rem} .footer-wrap a, .footer-wrap a:active, .footer-wrap a:visited, .footer-wrap p, .footer-wrap h4, .footer-wrap h5, .footer-wrap h6, .footer-wrap span {font-size: .875rem} .browser-upgrade {text-align: center} #goog-wm-qt {font-size: .875rem} .mfp-zoom {cursor: zoom-in} 
  • Duplicated Selectors16
    textarea {} /* (2 times) */.mfp-counter {} /* (2 times) */h1 {} /* (2 times) */hr {} /* (2 times) */pre {} /* (2 times) */svg:not(:root) {} /* (2 times) */figure {} /* (2 times) */input[type="checkbox"], input[type="radio"] {} /* (2 times) */body {} /* (2 times) */.site-name {} /* (2 times) */.footer-wrap footer {} /* (2 times) */.pull-left {} /* (2 times) */.pull-right {} /* (2 times) */.clearfix {} /* (2 times) */.navicon-lines-button:hover {} /* (2 times) */.image-wrap:after {} /* (2 times) */
  • Importants11

    Provides a way for a stylesheet author to give a CSS value more weight than it naturally has

    Avoid usage if at all possible. When you use !important, you’re disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight

    .CodeRay .debug {color: #fff !important} .CodeRay .debug {background: blue !important} .btn, #goog-wm-sb {border-width: 2px !important} .btn, #goog-wm-sb {border-style: solid !important} .btn, #goog-wm-sb {text-decoration: none !important} .tag-box ul {margin: 0 0 20px 4px !important} .social-share a {text-decoration: none !important} #goog-wm-qt {border-width: 2px !important} #goog-wm-qt {border-style: solid !important} .mfp-wrap {outline: none !important} .mfp-hide {display: none !important} 
  • Multi Classes Selectors15

    Selectors with multiple classes

    Unnecessary specificity, consider reducing to single class or id instead

    .inline.radio {}.checkbox.inline {}.inline.radio {}.inline.radio {}.checkbox.inline {}.checkbox.inline {}.active.navicon-lines-button.x {}.active.navicon-lines-button.x {}.active.navicon-lines-button.x {}.active.navicon-lines-button.x {}.active.navicon-lines-button.x {}.fa-lg.fa-li {}.fa.pull-left {}.fa.pull-right {}.mfp-figure.mfp-loading {}
  • Old IE Fixes21

    Rules specific to IE greater than or equal to IE 6 or IE 7

    Lower browser usage for previous versions of IE prevents these rules from being very useful

    .clearfix {*zoom: 1} .half {*zoom: 1} .third {*zoom: 1} btnform legend {*margin-left: -7px} label, input, button, select, textarea {*vertical-align: middle} input[type="image"], input[type="checkbox"], input[type="radio"] {*margin-top: 0} input[type="checkbox"], input[type="radio"] {*width: 13px} input[type="checkbox"], input[type="radio"] {*height: 13px} input[type="button"], input[type="reset"], input[type="submit"] {*overflow: visible} select, input[type="file"] {*margin-top: 4px} .navigation-wrapper {*zoom: 1} #main {*zoom: 1} .image-wrap {*zoom: 1} .image-grid {*zoom: 1} .recent-grid {*zoom: 1} .footer-wrap {*zoom: 1} .fa-rotate-90 {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)} .fa-rotate-180 {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)} .fa-rotate-270 {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)} .fa-flip-horizontal {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0)} .fa-flip-vertical {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)} 
  • Old Property Prefixes56

    Properties with a no longer needed vendor prefix

    These have since been integrated or removed from mentioned browsers and can safely be removed from CSS

    hr { -moz-box-sizing: content-box } // was required by Firefox 28 and earlier input[type="search"] { -moz-box-sizing: content-box } // was required by Firefox 28 and earlier input[type="search"] { -webkit-box-sizing: content-box } // was required by Android Browser 3, Chrome 9, iOS Safari 4.2, Safari 5 and earlier b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { -moz-transition: all 0.2s ease } // was required by Firefox 15 and earlier b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { -ms-transition: all 0.2s ease } // prefix is no longer supported b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { -o-transition: all 0.2s ease } // prefix is no longer supported .well { -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05) } // was required by Android Browser 3, Chrome 9, iOS Safari 4.2, Safari 5 and earlier .well { -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05) } // was required by Firefox 3.6 and earlier input, button, select, textarea { -webkit-box-sizing: border-box } // was required by Android Browser 3, Chrome 9, iOS Safari 4.2, Safari 5 and earlier input, button, select, textarea { -moz-box-sizing: border-box } // was required by Firefox 28 and earlier input, button, select, textarea { -ms-box-sizing: border-box } // prefix is no longer supported input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box } // was required by Android Browser 3, Chrome 9, iOS Safari 4.2, Safari 5 and earlier input[type="checkbox"], input[type="radio"] { -moz-box-sizing: border-box } // was required by Firefox 28 and earlier input[type="checkbox"], input[type="radio"] { -ms-box-sizing: border-box } // prefix is no longer supported input[type="image"] { -webkit-box-shadow: none } // was required by Android Browser 3, Chrome 9, iOS Safari 4.2, Safari 5 and earlier input[type="image"] { -moz-box-shadow: none } // was required by Firefox 3.6 and earlier input[type="file"] { -webkit-box-shadow: none } // was required by Android Browser 3, Chrome 9, iOS Safari 4.2, Safari 5 and earlier input[type="file"] { -moz-box-shadow: none } // was required by Firefox 3.6 and earlier input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus { -webkit-box-shadow: none } // was required by Android Browser 3, Chrome 9, iOS Safari 4.2, Safari 5 and earlier input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus { -moz-box-shadow: none } // was required by Firefox 3.6 and earlier .top-navigation li a { -moz-transition: all 0.2s } // was required by Firefox 15 and earlier .top-navigation li a { -ms-transition: all 0.2s } // prefix is no longer supported .top-navigation li a { -o-transition: all 0.2s } // prefix is no longer supported .js .nav .active+ul { -moz-transition: max-height .4s } // was required by Firefox 15 and earlier .js .nav .active+ul { -o-transition: max-height .4s } // prefix is no longer supported .js .nav .active+ul { -ms-transition: max-height .4s } // prefix is no longer supported .author-social:active { -moz-transform: translate(0, 2px) } // was required by Firefox 15 and earlier .author-social:active { -ms-transform: translate(0, 2px) } // was required by IE 9 and earlier .author-social:active { -o-transform: translate(0, 2px) } // prefix is no longer supported .toc li a { -moz-transition: opacity 0.2s ease-in-out } // was required by Firefox 15 and earlier .toc li a { -ms-transition: opacity 0.2s ease-in-out } // prefix is no longer supported .toc li a { -o-transition: opacity 0.2s ease-in-out } // prefix is no longer supported .fa-spin { -moz-animation: spin 2s infinite linear } // was required by Firefox 15 and earlier .fa-spin { -o-animation: spin 2s infinite linear } // prefix is no longer supported .fa-rotate-90 { -moz-transform: rotate(90deg) } // was required by Firefox 15 and earlier .fa-rotate-90 { -ms-transform: rotate(90deg) } // was required by IE 9 and earlier .fa-rotate-90 { -o-transform: rotate(90deg) } // prefix is no longer supported .fa-rotate-180 { -moz-transform: rotate(180deg) } // was required by Firefox 15 and earlier .fa-rotate-180 { -ms-transform: rotate(180deg) } // was required by IE 9 and earlier .fa-rotate-180 { -o-transform: rotate(180deg) } // prefix is no longer supported .fa-rotate-270 { -moz-transform: rotate(270deg) } // was required by Firefox 15 and earlier .fa-rotate-270 { -ms-transform: rotate(270deg) } // was required by IE 9 and earlier .fa-rotate-270 { -o-transform: rotate(270deg) } // prefix is no longer supported .fa-flip-horizontal { -moz-transform: scale(-1, 1) } // was required by Firefox 15 and earlier .fa-flip-horizontal { -ms-transform: scale(-1, 1) } // was required by IE 9 and earlier .fa-flip-horizontal { -o-transform: scale(-1, 1) } // prefix is no longer supported .fa-flip-vertical { -moz-transform: scale(1, -1) } // was required by Firefox 15 and earlier .fa-flip-vertical { -ms-transform: scale(1, -1) } // was required by IE 9 and earlier .fa-flip-vertical { -o-transform: scale(1, -1) } // prefix is no longer supported .mfp-container { -webkit-box-sizing: border-box } // was required by Android Browser 3, Chrome 9, iOS Safari 4.2, Safari 5 and earlier .mfp-container { -moz-box-sizing: border-box } // was required by Firefox 28 and earlier button.mfp-close, button.mfp-arrow { -webkit-box-shadow: none } // was required by Android Browser 3, Chrome 9, iOS Safari 4.2, Safari 5 and earlier img.mfp-img { -webkit-box-sizing: border-box } // was required by Android Browser 3, Chrome 9, iOS Safari 4.2, Safari 5 and earlier img.mfp-img { -moz-box-sizing: border-box } // was required by Firefox 28 and earlier .mfp-img-mobile .mfp-bottom-bar { -webkit-box-sizing: border-box } // was required by Android Browser 3, Chrome 9, iOS Safari 4.2, Safari 5 and earlier .mfp-img-mobile .mfp-bottom-bar { -moz-box-sizing: border-box } // was required by Firefox 28 and earlier 
  • Qualified Selectors12

    Since IDs are unique and classes are more unique than tags, adding a tag name would slow down the matching process needlessly

    Don’t qualify class or ID rules with tag names, as they are more unique than the tag. Strip tag names where possible

    span.CodeRay {}table.CodeRay {}table.CodeRay td {}.CodeRay span.line-numbers {}ol.CodeRay {}ol.CodeRay li {}#index article h3.link-post {}#drawer.js-hidden {}button.mfp-close {}button.mfp-arrow {}img.mfp-img {}.mfp-img-mobile img.mfp-img {}
  • Redundant Child Nodes Selectors6

    Deteced redundancies for child node selectors

    Dry up duplication by nesting rules under a set of similar selectors

    ol.CodeRay li {}.tag-box ul li {}.tag-box ul li:after {}.tag-box ul li:last-child:after {}.toc li ul li a {}#goog-fixurl ul li {}
  • Universal Selectors3

    The universal selector matches any element type

    Universal selectors can be implied (and therefore omitted) if it isn’t the only component of the simple selector, avoid whenever possible

    [hidden] {}::-moz-selection {}::selection {}

CSS Stats

CSS Metrics

Base64 Length0
Redundant Body Selectors0
Colors120
Comments2
Comments Length217
Complex Selectors By Attribute0
Empty Rules0
Expressions0
Imports0
Media Queries39
Not Minified0
Parsing Errors0
Property Resets0
Specificity Id Avg0.02
Specificity Id Total27
Specificity Class Avg1.16
Specificity Class Total1444
Specificity Tag Avg0.73
Specificity Tag Total914
Selectors1244
Selector Length Avg1.360128617363344
Selectors By Attribute41
Selectors By Class1325
Selectors By Id27
Selectors By Pseudo622
Selectors By Tag349
Length56075
Rules1015
Declarations1916