SmolWeb Validator v1.4.1
🔍 Validating: https://cad.cx
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Loaded 190 CSS property rules from css-grading.conf
❰❱ HTML VALIDATION SUMMARY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
❌ INVALID: This page does not conform to the smolweb HTML subset.
📊 Statistics:
Total elements: 200
Valid elements: 200
Invalid elements: 0
🚫 Misnested Tags (1):
1. HTML parsing error at position 7818 (line 145): Unexpected EndTag token [</a>] when in state [InBody]
❌ Errors (2):
1. <span> must have a closing </span> at position 7752 (line 145): html > body > div > div > section > div > ul > li > a > span.pronunciation
2. Missing required attribute 'content' on <meta> at position 773 (line 14): html > head > meta
⚠️ Warnings (4):
• Page must be usable without <script> block at position 17626 (line 334): html > body > script
• Page must be usable without <script> block at position 17697 (line 335): html > body > script
• Page must be usable without <script> block at position 17763 (line 336): html > body > script
• Page must be usable without <script> block at position 17874 (line 339): html > body > script
💡 Recommendations (4):
• Consider adding recommended attribute 'role' on <section> at position 1332 (line 26): html > body > div > div > section#internal
• Consider adding recommended attribute 'type' on <script> at position 17763 (line 336): html > body > script
• Consider adding recommended attribute 'src' on <script> at position 17874 (line 339): html > body > script
• Consider adding recommended attribute 'type' on <script> at position 17874 (line 339): html > body > script
✅ Valid tags used:
• <a>: 68 occurrence(s)
• <li>: 66 occurrence(s)
• <img>: 15 occurrence(s)
• <meta>: 9 occurrence(s)
• <ul>: 7 occurrence(s)
• <div>: 6 occurrence(s)
• <link>: 5 occurrence(s)
• <h2>: 4 occurrence(s)
• <script>: 4 occurrence(s)
• <h1>: 3 occurrence(s)
• <h3>: 3 occurrence(s)
• <nav>: 2 occurrence(s)
• <section>: 1 occurrence(s)
• <body>: 1 occurrence(s)
• <title>: 1 occurrence(s)
• <p>: 1 occurrence(s)
• <head>: 1 occurrence(s)
• <header>: 1 occurrence(s)
• <html>: 1 occurrence(s)
• <span>: 1 occurrence(s)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
HTML Validation complete.
🎨 CSS VALIDATION REPORT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
URL: https://cad.cx
Final Grade: 🟥 F-
- Property Grade: F (heavy performance impact)
- Size: 7,2KB (minor penalty)
📊 Statistics:
CSS Rules: 85
Total Occurrences: 165
Unique Rule Patterns: 50
File Size: 7344 bytes (7,2KB)
📋 Occurrences by Grade:
- Grade A: 124 occurrences
- Grade B: 11 occurrences
- Grade C: 8 occurrences
- Grade D: 11 occurrences
- Grade E: 2 occurrences
- Grade F: 9 occurrences
🔍 Rules Breakdown:
🟩 Grade A (124 occurrences across 31 rules):
background-image - Background images (18 occurrences):
• colors.css:6 - background-image: url(../images/2013/logos/pittco.png)
• colors.css:9 - background-image: url(../images/2013/logos/thinkcomputers.png)
• colors.css:12 - background-image: url(../images/2013/logos/scrc.png)
• colors.css:15 - background-image: url(../images/2018/logos/watson.png)
• colors.css:19 - background-image: url(../images/2013/logos/vivisimo.png)
• colors.css:22 - background-image: url(../images/2013/logos/metamesh.png)
• colors.css:25 - background-image: url(../images/2023/logos/codeandsupply.png)
• colors.css:29 - background-image: url(../images/2023/logos/codeandsupplyfund.png)
• colors.css:33 - background-image: url(../images/2014/logos/devopsdays.png)
• colors.css:36 - background-image: url(../images/2014/logos/imaginecareers.png)
• colors.css:39 - background-image: url(../images/2014/logos/gxl.png)
• colors.css:42 - background-image: url(../images/2016/logos/abstractions.png)
• colors.css:45 - background-image: url(../images/2018/logos/arcadia.png)
• colors.css:48 - background-image: url(../images/2017/logos/uptime.png)
• colors.css:51 - background-image: url(../images/2017/logos/heartifacts.png)
• colors.css:54 - background-image: url(../images/2019/logos/target.png)
• colors.css:58 - background-image: url(../images/2023/logos/homebrew.svg)
• colors.css:62 - background-image: url(../images/2023/logos/community_internet_solutions.png)
width - Element width (14 occurrences):
• structure.css:5 - width: 100%
• structure.css:11 - width: 1280px
• structure.css:42 - width: 24px
• structure.css:47 - width: 32px
• structure.css:52 - width: 32px
• structure.css:57 - width: 64px
• structure.css:115 - width: 95%
• structure.css:149 - width: 50%
• structure.css:153 - width: 100%
• structure.css:159 - width: 960px
• structure.css:168 - width: 61%
• structure.css:180 - width: 768px
• structure.css:187 - width: 97%
• structure.css:203 - width: 500px
font-size - Font sizing (12 occurrences):
• reset.css:22 - font-size: 100%
• structure.css:30 - font-size: 1.3em
• structure.css:111 - font-size: 110%
• structure.css:195 - font-size: 5em !important
• structure.css:198 - font-size: 0.9em !important
• fonts.css:2 - font-size: calc(1rem + 0.25vw)
• fonts.css:7 - font-size: 7em
• fonts.css:32 - font-size: 16px
• fonts.css:35 - font-size: 90%
• fonts.css:40 - font-size: 120%
• fonts.css:44 - font-size: 140%
• fonts.css:53 - font-size: x-small
height - Element height (7 occurrences):
• structure.css:6 - height: 1px
• structure.css:43 - height: 24px
• structure.css:48 - height: 32px
• structure.css:53 - height: 32px
• structure.css:58 - height: 64px
• structure.css:66 - height: 64px
• structure.css:69 - height: 64px
color - Text and foreground colors (6 occurrences):
• structure.css:116 - color: black
• fonts.css:9 - color: #bbb
• fonts.css:15 - color: #fff
• fonts.css:20 - color: #888
• fonts.css:25 - color: #888
• fonts.css:57 - color: inherit
margin-bottom - Box model bottom margin (6 occurrences):
• structure.css:26 - margin-bottom: 20px
• structure.css:104 - margin-bottom: 1em
• structure.css:107 - margin-bottom: 0.2em
• structure.css:110 - margin-bottom: 0.4em
• structure.css:123 - margin-bottom: 0.7em
• structure.css:142 - margin-bottom: 1em
margin-left - Box model left margin (6 occurrences):
• structure.css:12 - margin-left: -640px
• structure.css:160 - margin-left: -480px
• structure.css:172 - margin-left: 5px
• structure.css:181 - margin-left: -384px
• structure.css:188 - margin-left: 0px
• structure.css:204 - margin-left: -250px
display[inline|block|list-item|none] - Basic display values (5 occurrences):
• reset.css:29 - display: block
• structure.css:29 - display: inline
• structure.css:73 - display: inline
• structure.css:78 - display: inline
• structure.css:81 - display: inline
margin - Box model margins (5 occurrences):
• reset.css:19 - margin: 0
• structure.css:62 - margin: 0 auto
• structure.css:120 - margin: 0.4em 0.2em
• structure.css:130 - margin: 0.3em
• structure.css:174 - margin: 0 auto
border-top - Top border (4 occurrences):
• structure.css:161 - border-top: 1px solid yellow
• structure.css:182 - border-top: 1px solid red
• structure.css:190 - border-top: 1px solid green
• structure.css:205 - border-top: 1px solid blue
text-align - Text alignment (4 occurrences):
• structure.css:18 - text-align: center
• structure.css:74 - text-align: center
• structure.css:95 - text-align: center
• fonts.css:54 - text-align: right
padding-left - Box model left padding (3 occurrences):
• structure.css:85 - padding-left: 18px
• structure.css:100 - padding-left: 18px
• structure.css:191 - padding-left: 5px !important
margin-top - Box model top margin (3 occurrences):
• structure.css:22 - margin-top: 20px
• structure.css:25 - margin-top: 0px
• structure.css:112 - margin-top: 0.3em
float - Element floating (3 occurrences):
• structure.css:126 - float: left
• structure.css:150 - float: left
• structure.css:170 - float: left
padding - Box model padding (3 occurrences):
• reset.css:20 - padding: 0
• structure.css:114 - padding: 0.2em
• structure.css:134 - padding: 0 1em 1em 1em
font-variant - Font variant (small-caps) (3 occurrences):
• fonts.css:19 - font-variant: small-caps
• fonts.css:26 - font-variant: small-caps
• fonts.css:52 - font-variant: all-petite-caps
font-family - Font family selection (2 occurrences):
• fonts.css:6 - font-family: Arial
• fonts.css:30 - font-family: "Ubuntu Light","Ubuntu","Arial", sans-serif
font-weight - Font weight (2 occurrences):
• fonts.css:8 - font-weight: bold
• fonts.css:31 - font-weight: 300
margin-right - Box model right margin (2 occurrences):
• structure.css:127 - margin-right: 0.2em
• structure.css:171 - margin-right: 5px
vertical-align - Vertical alignment (2 occurrences):
• reset.css:24 - vertical-align: baseline
• structure.css:39 - vertical-align: top
background-repeat - Background image repeat (2 occurrences):
• structure.css:86 - background-repeat: no-repeat
• structure.css:99 - background-repeat: no-repeat
line-height - Line height (2 occurrences):
• reset.css:32 - line-height: 1
• fonts.css:36 - line-height: 130%
font-style - Font style (normal/italic) (2 occurrences):
• structure.css:119 - font-style: italic
• fonts.css:48 - font-style: italic
border - Basic borders (1 occurrences):
• reset.css:21 - border: 0
text-decoration - Text decoration (1 occurrences):
• fonts.css:61 - text-decoration: dotted underline 0.1em
background-color - Background colors (1 occurrences):
• colors.css:2 - background-color: #eee
list-style - List styling shorthand (1 occurrences):
• reset.css:35 - list-style: none
background - Background shorthand property (1 occurrences):
• structure.css:113 - background: #bbb
font - Font shorthand property (1 occurrences):
• reset.css:23 - font: inherit
padding-right - Box model right padding (1 occurrences):
• structure.css:192 - padding-right: 5px !important
list-style-type - List bullet styles (1 occurrences):
• structure.css:133 - list-style-type: disc
🟦 Grade B (11 occurrences across 4 rules):
@media - Responsive design media queries (6 occurrences):
• structure.css:146 - @media
• structure.css:157 - @media
• structure.css:165 - @media
• structure.css:178 - @media
• structure.css:185 - @media
• structure.css:201 - @media
position[relative] - Relative positioning (3 occurrences):
• structure.css:63 - position: relative
• structure.css:148 - position: relative
• structure.css:167 - position: relative
visibility - Element visibility control (1 occurrences):
• fonts.css:65 - visibility: hidden
display[inline-block] - Inline-block layout (1 occurrences):
• structure.css:138 - display: inline-block
🟪 Grade C (8 occurrences across 3 rules):
background-size - Background image sizing (5 occurrences):
• colors.css:16 - background-size: contain
• colors.css:26 - background-size: contain
• colors.css:30 - background-size: contain
• colors.css:55 - background-size: contain
• colors.css:63 - background-size: contain
content - Generated content for pseudo-elements (2 occurrences):
• reset.css:42 - content: ''
• reset.css:43 - content: none
overflow - Content overflow handling (1 occurrences):
• structure.css:7 - overflow: visible
🟨 Grade D (11 occurrences across 6 rules):
left - Positioned element coordinates (3 occurrences):
• structure.css:4 - left: 0px
• structure.css:14 - left: 50%
• structure.css:189 - left: 0
text-shadow - Text shadows (3 occurrences):
• fonts.css:10 - text-shadow: 0px 1px 0px #a99, 0px 2px 0px #988, 0px 3px 0px #877, 0px 4px 0px #766, 0px 5px 0px #655, 0px 6px 0px #544, 0px 7px 0px #433, 0px 8px 7px #001135
• fonts.css:14 - text-shadow: 0px 1px 1px #d99, 0px 2px 2px #c88, 0px 3px 3px #b77, 0px 4px 4px #a66, 0px 5px 5px #955, 0px 6px 6px #844, 0px 7px 7px #733, 0px 8px 8px #331135, 0px -2px 10px #f00
• fonts.css:24 - text-shadow: 0px 1px 10px #4d4d4d
position[absolute|fixed] - Absolute positioning requires layout calculations (2 occurrences):
• structure.css:2 - position: absolute
• structure.css:13 - position: absolute
border-collapse - Table border model (1 occurrences):
• reset.css:46 - border-collapse: collapse
border-spacing - Table border spacing (1 occurrences):
• reset.css:47 - border-spacing: 0
top - Positioned element coordinates (1 occurrences):
• structure.css:3 - top: 0px
🟧 Grade E (2 occurrences across 1 rules):
transition - CSS transitions (2 occurrences):
• structure.css:37 - transition: all 0.2s ease-in-out
• structure.css:94 - transition: all 1s ease-in
🟥 Grade F (9 occurrences across 5 rules):
-webkit-transition - Vendor-prefixed properties are forbidden in SmolWeb (2 occurrences):
• structure.css:33 - -webkit-transition: all 0.2s ease-in-out
• structure.css:90 - -webkit-transition: all 1s ease-in
-o-transition - Vendor-prefixed properties are forbidden in SmolWeb (2 occurrences):
• structure.css:35 - -o-transition: all 0.2s ease-in-out
• structure.css:92 - -o-transition: all 1s ease-in
-ms-transition - Vendor-prefixed properties are forbidden in SmolWeb (2 occurrences):
• structure.css:36 - -ms-transition: all 0.2s ease-in-out
• structure.css:93 - -ms-transition: all 1s ease-in
-moz-transition - Vendor-prefixed properties are forbidden in SmolWeb (2 occurrences):
• structure.css:34 - -moz-transition: all 0.2s ease-in-out
• structure.css:91 - -moz-transition: all 1s ease-in
quotes - Unknown or unsupported CSS property (1 occurrences):
• reset.css:38 - quotes: none
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CSS validation complete.```
I think keeping the site basic is important. Smolweb seems to be a good thing and includes a validator against its standard subset of HTML and CSS.
https://smolweb.org/validator/