CSSBurner Help Page
Follow @PhDave2005Help Topics
- Basic, intermediate, and advanced level tips on how to use CSSBurner functionality.
Scan
General Considerations
- The scan function takes CSS takes a group of CSS styles and parses them using hundreds of algorithms. Using W3C standards as a reference, the parsed output is then returned to the user marked up with a variety of indicators (see below). The number of indicators will depend on the specific settings chosen. In general, a more detailed analysis will be returned to the user as additional settings are added to the scan, however, this will increase the scanning time (in some cases, the increase can be as much as a factor of 2 or more).
Default Settings
- Errors are detected by default (note: additional errors are detected at higher access levels). Errors are defined as:
- any syntax that is incorrect (e.g.
displayyy: none
) - any markup that will have no effect, for example:
tr {
margin: 10px
}
is an error because margin cannot apply to internal table elements.(see https://drafts.csswg.org/css-box-3/#margin-physical) - any conditional group rules in which the conditional logic is inconsistent, thereby making the group rule inaccessible:
Example 1@media screen and (min-width: 1000px) and (max-width: 900px) {...}
(inaccessible because a screen cannot have a max-width of 900px and a min-width of 1000px at the same time)
Example 2@supports (display: grid) and (not (display: grid)) {...}
(inaccessible because the logic (p && !p) is not possible) - (Strict Mode only) any markup that is out of scope:
Example 1#x {
An error is thrown because in the "stylesheet" above, element
flex: 1 1 0%
}#x
requires this element to be a flex-item, and therefore requires a parent element to be a flex-container; we see no such element in this stylesheet. However, if Strict Mode is not set, the assumption is made that somewhere external to the scanned stylesheet, such as a<style>
tag or a different linked stylesheet, or even an inline style in the DOM, the flex-container may be present, so an error should not be thrown because CSSBurner is "forgiving" and it is unknown if the parent flex-container is truly present or not.
Example 2div {
An error is thrown because in the "stylesheet" above, the use of the custom property
--wid: 100px
}
p {
width: var(--wid)
}--wid
is only in scope for<div>
, not<p>
elements. However, if Strict Mode is not set, the assumption is made that somewhere external to the scanned stylesheet, such as a<style>
tag or a different linked stylesheet, the custom property--wid
may be defined, so an error should not be thrown because it is unknown if this is truly an error.
- any syntax that is incorrect (e.g.
- Error detection cannot be turned off, however, some settings can be adjusted to increase or decrease the number of errors thrown. (For one example, see the Strict Mode setting below)
- Error detection follows, as closely as possible, a "forgiving format". This means that if there is detectable support (defined as >= 1% browser support) for a feature, it will NOT be considered an error. Here are some examples:
- The spread radius of
text-shadow
This is a 4th<length>
value that is only supported in ~1.5% of browsers, but in those browsers it is valid markup. Since CSSBurner is "forgiving" with errors, a warning is thrown. - Unreferenced <custom-property-name> If the first argument of the var() function (e.g.,
var(--X)
) is not referenced in a stylesheet, it may be because the <custom-property-name> is referenced in a different stylesheet. A warning will be thrown unless (a) the fallback is invalid or (b) the scan setting "Scan URL where CSS is served" is selected (this setting will find all the stylesheets set by<link>
on that page). In either of these cases, an error will be thrown. - Unreferenced <family-name> If a font-family referenced by the
font-family
orfont
property is not a Web Safe font (see below) and is not defined by any@font-face
rule, it may be because the <family-name> is referenced in a different stylesheet. A warning will be thrown unless the scan setting "Scan URL where CSS is served" is selected (this setting will find all the stylesheets set by<link>
on that page). Only in this cases will an error be thrown.
- The spread radius of
- Even Web Safe fonts do not have 100% support. The CSSBurner parser sets a threshold support percentage (on either a Windows or Mac operating system as listed here) of 90%. Any font family that does not have at least 90% support on either operating system will be flagged as a warning.
- Errors are detected by default (note: additional errors are detected at higher access levels). Errors are defined as:
Additional Elements
- SVG Certain SVG elements, such as
<circle>
and<line>
, can be styled with CSS. Select this option in your scan ONLY if you know these elements are present, because accounting for these additional elements will add time to your scan. Here are some examples:circle { fill: red }
line { stroke: green }
- AMP (Accelerated Mobile Pages) Attributes and tags specific to AMP are usually prepended with "amp-". Here are some examples:
- amp-accordion
- amp-img
- amp-video
- Angular Material Attributes and tags specific to Angular Material are usually prepended with "mat-". Here are some examples:
- mat-card
- mat-radio-button
- mat-slider
- SVG Certain SVG elements, such as
Level of Scanning Detail
- Enable Warnings A warning will be thrown if your stylesheet contains issues that are not errors (i.e., your CSS will still render properly) but you could still want brought to your attention. Here are some examples:
- Pseudoelements using 1-colon syntax: Starting in CSS3, new pseudoelements are required to use the 2-colon syntax, as in
::placeholder
. That being said, the legacy CSS2 1-colon syntax is still valid for:after
,:before
,:first-letter
, and:first-line
. However, a warning will be thrown for these since they do use legacy pseudoelement syntax, which may no longer be valid in the future releases. - Syntax that has been mentioned will be changed: For example,
rgba(0, 0, 0, 1)
is currently valid to render black, but this W3C resource suggests this syntax is being supported for legacy reasons. (which means that one day it may no longer be supported!) - Syntax that is non-standard / deprecated / experimental / etc.: Properties that are one of the following may still be valid, depending on the browser. These designations are:
- Deprecated
- Experimental
- Legacy
- Non-Standard
- Not Implemented
- Obsolete
- Poor Browser Support
- Rarely Used
- Removed
- Under Consideration
- Repeated properties within a declaration block: You may be doing the following to maximize browser coverage:
div {
background: -webkit-linear-gradient(bottom, red, green);
background: linear-gradient(to bottom, red, green)
}
However, the following is an oversight:div {
display: flex;
display: none
}
so while this is not a syntax error, it is definitely not what you meant to do!
- Pseudoelements using 1-colon syntax: Starting in CSS3, new pseudoelements are required to use the 2-colon syntax, as in
- Optimize CSS An optimization will be thrown if your stylesheet contains issues that are not errors (i.e., your CSS will still render properly) nor warnings, but you could save some bytes if you made some edits to your stylesheet. Here are some examples:
- Quoted attribute values but escape characters absent: As one example, the following needs to be quoted:
div[title="Hi there"] {
color: red
}
but the following does not:div[title="Hi"] {
color: red
}
Removing the quotes from the second declaration will save you 2 bytes. - Zero units: In almost all cases, it is perfectly acceptable to omit the unit when the value of a property is 0 (with one exception). For example, this declaration:
div {
width: 0px
}
can be rewritten 2 bytes shorter by omitting the unit:div {
width: 0
}
- Quoted attribute values but escape characters absent: As one example, the following needs to be quoted:
- Offer Suggestions CSSBurner will scan your stylesheet and offer suggestions intended to
- maximize browser coverage
- suggest code edits based on W3C documentation
- tweak your code so you can remove redundant or unnecessary markup
div {
font-family: "Times New Roman"
}
is recommended, but a suggestion will be made to add quotation marks fordiv {
font-family: Times New Roman
}
(but the font will render properly).
Here is another example: if you are trying to support flexbox in older browsers and have the rulediv {
display: flex
}in your stylesheet, a good suggestion would be to add
-webkit-flex
so the declaration becomes:div {
display: -webkit-flex;
display: flex;
}
There are many different types of suggestions that can be made, so think of this feature as a code review! (Premium) - Check URLs You may have made a typo in the URL / source for a resource, for example:
div {
background-image: url("https://mysite.com/images/myimage.pnggg")
}
Checking this option will determine if the resource exists, but will add time to your scan.
Since the timeout is set to 5 seconds, having even 1 URL that is sluggish to resolve will noticeably increase your scan time. - Strict Mode The definition of what is a detected error/warning/optimization/suggestion will be broadened to include the following:
- Errors will be thrown for any syntax that cannot strictly be defined as parseable within the context of the provided stylesheet. For example, a solitary declaration such as this:
.flex {
flex-direction: row
}
would be an error because stricly speaking here, .flex must be a flex-container, but there is no evidence in this stylesheet that .flex has been set todisplay: flex
ordisplay: inline-flex
(which would make a flex-container). - Warnings will be thrown for any CSS markup which refers to possible future deprecations or legacy syntax.
- Optimizations will be generated regardless of browser quirks (As one example, Internet Explorer and Safari cannot parse the overflow two-keyword syntax - e.g.
overflow: scroll scroll
- this must be separated asoverflow-x: scroll
andoverflow-y: scroll
. The "Strict Mode" option will see the separated properties as "optimizeable") - Suggestions will be offered for all vendor-prefixed properties and
@keyframes
rules to maximize browser coverage.
- Errors will be thrown for any syntax that cannot strictly be defined as parseable within the context of the provided stylesheet. For example, a solitary declaration such as this:
- Scrutinize Your stylesheet will be scanned with a fine-tooth comb, but this will greatly increase scan time (on average by about 15%). The advantage is that errors, warnings, and optimizations that otherwise would go undetected, will be detected. Although the increase in detection rate will vary from stylesheet to stylesheet, the average increase is about 2%. (Premium)
- Scan URL where CSS is served Sometimes the DOM itself may contain rules which need to be scanned. For example, isolated in a stylesheet, the following declaration will not do what you intend:
span {
width: 1000px
}
because<span>
is an inline element; CSSBurner would throw an error. However, within the DOM of your project, the following rule may exist:<style>
span {
display: block
}
</style>
which would then obviate throwing an error! (must be logged in)
- Enable Warnings A warning will be thrown if your stylesheet contains issues that are not errors (i.e., your CSS will still render properly) but you could still want brought to your attention. Here are some examples:
Additional Considerations
- Javascript is completely ignored Stylesheets are parsed without any consideration for dynamic content resulting from executed Javascript. For example, given the following rules:
input#A {
display: none
}
input#A:focus {
background: skyblue
}
CSSBurner will throw an error on the:focus
pseudoclass, because all the parser knows is that this particular input is not displayed and therefore cannot be focused, so the second rule will never be applied. You may have a script in a .js file somewhere which runs the following on page load:
to unhide the input and therefore make it focusable, but for the purposes of CSSBurner this change does not exist.document.getElementById("A").style.display = 'inline-block';
- Javascript is completely ignored Stylesheets are parsed without any consideration for dynamic content resulting from executed Javascript. For example, given the following rules:
Videos
Statistics
Custom Settings
- Glean Include and display reasonable inferences that can be drawn based on the statistical results
Videos
Minify
Custom Settings
- SmartMinify
- Combine disordered selectors and declaration block
- Remove function arguments when they match defaults. For example,
filter: blur(0px)
→filter:blur()
, andlinear-gradient(to bottom, red, blue)
→linear-gradient(red,blue)
. - Remove presentational hints from declaration blocks (download entire set as .json)
- Remove system defaults from declaration blocks (download entire set as .json)
- User agent defaults were determined using the latest version of Chrome. Sources such as https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/html.css and https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/html/resources/html.css were referenced as starting points, then every selector was painstakingly checked in Chrome DevTools to determine if the user agent default rules shown in DevTools actually matched the sources.
- If the system default rule is within an
@media
block or other conditional rule such as@supports
, the default will not be removed. This is done because system default rules are often included to override an opposing rule under another set of conditions. For example, consider these 2 conditional rules:@media (max-width: 768px) {
div.target
display: none
}
}
@media (min-width: 769px) {
div.target
display: block
}
}If the
display: block
is not explicitly set and if the users device display ever resizes to a larger size,div.target
would never display!
- Rewrite function primitives as derivatives (e.g.
transform: scaleX(1) scaleY(1)
→transform: scale(1,1)
) - Rewrite rgb/a() as shortest possible hex code (e.g.
rgb(255,255,255)
→#fff
) - Re-map positions (e.g.,
background-position-x: right 100%
→background-position-x:0
)
- Combine repeat rules e.g.,
div {color: red} p {color: red}
can be grouped todiv,p{color:red}
- Combine repeat selectors e.g.,
div {color: red} div {left: 2px}
can be combined todiv{color:red;left:2px}
- Maximize older browser compatibility
- Certain properties are not auto-condensed for SmartMinify because this is not supported (e.g., overflow-x and overflow-y → Safari ≤ 10, MS Edge, IE)
- Unitless zero for angle of gradient axis for
linear-gradient()
is not supported (IE ≤ 11)
- Optimize nth-* pseudoclasses For selectors such as the
:nth-child()
pseudoclass:- (2n ± 1) shortens to (odd)
- (even) shortens to (2n)
- (1n ± b) shortens to (n ± b)
- (an ± 0) becomes (an)
- Omit defaults For example:
@media all {}
→@media {}
align-self: first baseline
→align-self: baseline
- Remove optional quotes Quotes within e.g., the
url()
function, are not required - Rewrite common names
- Long color names such as
rebeccapurple
can be rewritten as a shorter hex color code#639
font-weight: bold
is rewritten asfont-weight:700
- Long color names such as
- SmartMinify
Default Settings
- All white space and comments will be stripped
- Long hex color codes will be shortened (e.g.,
#ffffff
→#fff
) - Longhand margin/padding/etc. will be shortened (e.g.,
padding: 2px 2px
→padding: 2px
) - Terminal declaration block semicolons will be removed
- Unnecessary units will be stripped (e.g.,
margin: 0px
→margin:0
)
Videos
Beautify
Spacing Options
- Colon Padding The number of white spaces to pad property colons (e.g. 1 whitespace →
color: red
) - Function Padding The number of white spaces to pad function parentheses (e.g. 1 whitespace →
linear-gradient( to bottom, blue, red )
) - Tab Indents Indents used in output declaration blocks before a property (e.g., 1 tab below)
div {
color: red
} - Combinator Padding The number of white spaces to pad selector combinators (e.g.
div+p {...}
with 2 whitespaces →div + p {...}
) - !important Separator Spaces The number of white spaces between a declaration value and the
!important
annotation (e.g..x { display: none !important }
has 1 separator space whereas.x { display: none!important }
has none)
- Colon Padding The number of white spaces to pad property colons (e.g. 1 whitespace →
Default Settings
- Property value "/" characters will have 1 whitespace placed before and after this character, regardless of the number of whitespaces that were present before. For example:
div {
border-radius: 2px/2px
}
becomes:div {
border-radius: 2px / 2px
} - Selector and declaration comma-separated lists will have 0 whitespace before this character and 1 whitespace placed after this character, regardless of the number of whitespaces that were present before. For example:
div,p {
background-position: center center, 25% 25%
}
becomes:div, p {
background-position: center center, 25% 25%
}
- Property value "/" characters will have 1 whitespace placed before and after this character, regardless of the number of whitespaces that were present before. For example:
Videos
Data Management
Options
- Concatenate Sources When uploading multiple source files (e.g. multiple .css files) or source URLs, checking Concatenate Sources will result in 1 set of analyzed data, instead of multiple separate sets. (requires Premium)
- Download Output When minifying and beautifying data, your parsed data will be automatically downloaded (as a .txt by default, must be logged in). Select from 2 sub-settings:
- Customize Filename Set the filename of the downloaded file to any valid filename (otherwise a default timestamped filename will be used)
- Output as .css Set this to download a .css file (instead of the default .txt format)
- Email Output The parsed output will be emailed to the same email you registered to use CSSBurner. (requires Premium)
- Report Errors Descriptively When this option is set, errors will be reported more verbosely, citing the documentation much more closely. (Scan only, requires Premium)
- Retain Comments By default, unless this option is set, comments (unless comments are invalidly formatted) will be removed. (Beautify only, requires subscription / logged in)
- Use Tracking Note Add a custom string you can use to distinguish tabs (when using multiple tabs, must be logged in) or when using Statistical Insights. (requires Premium)
Shortcuts
Actions
- Dismiss Dialog Box Swipe right (or left; see Settings) quickly 100px or more, or (using a keyboard) press the Esc key
- Go To Scanned CSS Rule Number Ctrl + G
- Maximize / Minimize Pinch-zoom dialog boxes or containers that can be maximized / minimized (touch screens only)
- Reset Parse View Swipe right (or left; change in Settings) quickly a distance of 100px or greater (touch screens, e.g., mobile device or tablet, only)
- Search Scanned Stylesheet Drag highlighted errors/warnings/optimizations/suggestions onto Search icon
- Top Nav Menu Ctrl + Number
- Zoom Scanned Stylesheet Ctrl + ± or pinch-zoom (report and output containers only)
Tools
Usage
- Browser Compatibility
- Selectors Check to see if a selector is supported by your current browser, with the exception of Internet Explorer. (requires Premium)
- Property:Value Pairs Check to see if a property:value rule is supported by your current browser, with the exception of Internet Explorer. (requires Premium)
- File Operations
- File Length Select a stylesheet file and this tool will calculate the filesize after trimming and removing comments. (must be logged in)
- Import and Parse a File Upload a previously parsed and signed file (from you or a teammate) and view / annotate in CSSBurner. (requires Premium)
- Merge CSS Files Join n .css/.txt files into 1 file. (auto-download, requires Premium)
- Perform Calculations
- Hex to HSL / RGB Color Conversion Input a hexadecimal color and it will be converted to HSL and RGB notations. (must be logged in)
- Selector Specificity Calculate the specificities of a selector-list. (requires Premium)
- Search W3C Documentation
- Term-Specific Searches Retrieve a list of matching W3C terms, grouped by W3C module. (requires Premium)
- Pro-Related Functions
- Invite Teammates Connect with other users to share parsed files and more. (requires Pro)
- Share Files Send parsed CSSBurner files or sandbox files to someone on your team. (requires Pro)
- View and Accept Invitations View a list of pending invitations to become teammates (for sharing files), and choose which invitations to accept. (requires Pro)
- Browser Compatibility
Dashboard
Usage
- All My Statistics Get all scan/stats/minify/beautify stats from when you were logged in. (requires login)
- Basic Session Statistics Get basic scan/stats/minify/beautify cached stats from last 30 days in this browser. (no login required)
- Statistical Insights Statistically analyze your logged in data to provide insights into how you may be able to further streamline your stylesheets. (requires Premium)
User Settings
UX Settings
- Animation Speed To the right is faster.
- Maximum Number of Tabs Set an upper limit of tabs (or 0 for no tabs) (requires login).
- Report/Output Location By default the scan report is on left and output on right, but checking this box swaps the default locations.
- Swipe Direction to Dismiss / Reset On touch screen device, users who prefer a left-direction swipe may set this as the direction to dismiss dialog boxes and reset parsed data. (default direction is to the right)
- Sync User Settings Your user settings (when logged in) for this device, will automatically be applied to any device on any browser. (requires Premium)
- Two-Factor Authentication Add an extra layer of security by requiring authentication by a securely emailed numeric code. (requires Basic account creation)
- Voice-Enhanced UX Turn on the browser's Speech Synthesizer to add additional guiding commentary to enhance usage of CSSBurner
Language Settings
- Currently the user may select Spanish and French as alternatives to the default language (English). Go to User > Account > Account Settings.
Premium Plans
- Premium Plan In addition to all the great features already offered by a Basic+ plan, Premium members have access to the following functionality:
- Check Browser Compatibility Determine if any CSS rule (property: property-value) is compatible with your current browser. Go to Tools → Check Browser Compatibility.
- Concatenate Minified Files Concatenate n .css files into 1 .css file. Go to Tools → Merge CSS Files.
- Email Parsed Output At the time your stylesheet is parsed, automatically email yourself a file of your parse output (scan, stats, minify, or beautify) that only you (when signed into your account) can open and view.
- Enhanced Tooltip (Scan) Mousing over highlighted issues with your stylesheet will generate a tooltip with enhanced functionality, such as checking for browser support, finding the first instance of a repeated declaration block or selector, copying suggestions to the clipboard, and more.
- Find First Instance (Scan) Using the enhanced tooltip, you will be able to automatically scroll do the first instance of a repeat or suggestion.Mouse over a highlighted element in your scan output, then click the down arrow, and then click 'First'.
NOTE: This only applies to optimizations and certain suggestions. - Fix Broken Rules (Scan) Any highlighted error, warning, or optimization can be further analyzed to generate a suggestion on how to fix the rule, if this is at all possible.
- Glean (Stats) Reasonable suggestions are offered based on statistical analysis results.
- Import/Export (Individual) Export your results (e.g. scan output or a sandbox) into a format that ONLY you (when signed into your CSSBurner account) can later import and view.
- Offer Stylesheet Suggestions (Scan) Suggested markup or edits, such as the suggestion of additional rules for added maximum browser coverage, and suggested rules to omit in order to group otherwise-identical declaration blocks, will be inserted into your scan output.
- Save More Sandboxes You can save as many as 10 CSSBurner sandboxes, which you can later retrieve. Select Sandbox Mode, then create a sandbox. Next click the Sandbox Menu (3 dots in upper right), followed by Save.
- Scrutinize (Scan) Activated when checking the 'Scrutinize' checkbox, this option scans your stylesheet with a fine-tooth comb. Errors, warnings, and optimizations that would not otherwise be caught will be detected, but the cost will be increased scan time.
- Smart Minify When you Minify, you can shrink your stylesheets even more:
- Auto-condense shorthand rules. For example
div {
overflow-x: auto;
overflow-y: auto
}
becomesdiv {
overflow: auto
}
You can also add exceptions to the auto-condense process. - Intelligently condense verbose markup, for example:
div {
background-position: left 100% top 100%
}
becomesdiv {
background-position: right bottom
} - Permute order of selectors in a grouped selector list to see if they are actually repeats
- Permute the order of rules in a declaration block to see if they are actually repeats
- Remove presentational hints
- Remove system defaults (e.g.,
div { display: block }
is a system default - no need to include this in stylesheet).
- Auto-condense shorthand rules. For example
- Statistical Comparisons Compare your stats versus the global CSSBurner average. Go to Dashboard → Statistical Insights.
- Errors per kB of markup
- Optimizations per kB of markup
- Stylesheet length
- Sticky Notes Add color-coordinated sticky notes to scan output - this note-modified output can be exported and later imported / viewed by other members of your team. Simply mouse over any highlighted item in your scan output, click the down arrow, and then click 'Note'.
- Sync User Settings Between Devices Your saved settings on 1 device will become your settings for all synced devices. Go to Account Settings → Sync Settings.
- Track Progress Track your trends to see if you are improving in your stylesheet writing. Go to Dashboard → Statistical Insights.
- Errors per kB
- Optimizations per kB
- Pro Plan In addition to all the great features already offered by a Premium plan, Pro membership is directed to developers who require team-oriented tools:
- Import/Export (Pro) Any member of your team can import a sandbox or parse result that you have exported. Go to Tools → Import for parsed output and Sandbox Menu → Import for sandboxes.
- Share Send any member of your team an a sandbox or parsed-output that is ready to be imported and viewed. Select Sandbox Mode, then the Sandbox Menu (3 dots in upper right), followed by Share.
- Save Even More Sandboxes You can save as many as 25 CSSBurner sandboxes, which you can later retrieve. Select Sandbox Mode, then create a sandbox. Next click the Sandbox Menu (3 dots in upper right), followed by Save.
- Premium Plan In addition to all the great features already offered by a Basic+ plan, Premium members have access to the following functionality:
Security
Cookies
- Since CSSBurner respects your privacy, you may choose to disallow some cookies. Please note that blocking certain cookies may impact your experience on this site. The categories of cookies are:
- Strictly Necessary These cookies assist in logging in / security checks related to authentication, and the rendering the site in the user-selected language. Without these cookie, CSSBurner could not be used. These cookies are strictly necessary, and their use is not optional.
- User Experience Cookies which fall under this category pertain to relevance of messages you may see, and rendering preferences of the site. These cookies are optional and may be turned off.
- User Statistics (Last 30 Days) Functions used (such as Scan or Minify) and number of times used, file size and average file size, are tracked using cookies. When this cookie is set to 'allowed', these statistics can be viewed under Dashboard (User > Dashboard > Basic Usage).
- PLEASE NOTE: When optional cookies (such as the User Experience cookie above) are turned off (checkbox is unchecked and Save button is clicked), any data that is currently saved in this browser will be deleted.
- Since CSSBurner respects your privacy, you may choose to disallow some cookies. Please note that blocking certain cookies may impact your experience on this site. The categories of cookies are:
Two-Factor Authentication
- Users may add an extra layer of security by requiring an additional authentication by a securely emailed numeric code. (requires Basic account creation)
Add-Ons
- API Parse Coming Soon! Use a POST request to parse and concatenate your stylesheets, determine compression ratios of .jpg/.png/.css resources, and more! For more information, go to the API Documentation.
- Parse LESS
- Parse SCSS