Change Details

Our [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS | CSS Coding conventions ]] don't include the a clear guideline on quoting or not quoting attribute selectors. There is an extensive article on when it is [[ https://mathiasbynens.be/notes/unquoted-attribute-values#css | valid to unquote attribute selectors ]] by Mathias Bynens: > a valid unquoted attribute value in CSS is any string of text that is not the empty string, is not just a hyphen (-), consists of escaped characters and/or characters matching /[-_\u00A0-\u10FFFF]/ entirely, and doesn’t start with a digit or two hyphens or a hyphen followed by a digit. Two questions: # Quote or unquote? ## Which quote – single or double? It would either make sense to consistently **quote all attribute selectors (with one type of quote)** and have CSS Minifier delete the syntactical sugar where applicable **or unqote per default where applicable** (majority of the cases apart from `content.externallinks.css` which doesn't seem to be in use any more. If we decide pro quoting we should also revisit guidelines on `url( image.png )` values there --- Further reading [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript#Quotes | JavaScript coding guidelines ]] pledge for single quotes on string literals, although it doesn't clarify on HTML constructs like ```lang=js $content.find( 'input[type="checkbox"]:not(.noshiftselect)' ).checkboxShiftClick(); ``` Src: [[ https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/src/mediawiki/page/ready.js;0f78272fddaa88d37a1c39b207cabe647e559312$34 | MW core ]] ```lang=js var $checkboxes = $( 'li input[type=checkbox]' ); ``` Src: [[ https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/src/mediawiki/mediawiki.checkboxtoggle.js;0f78272fddaa88d37a1c39b207cabe647e559312$15 | MW core ]] CC/JS do include a specific sentence on [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript#Pitfalls | CSS attribute selectors pitfalls ]], though linking to an invalid jQuery bug, where the author featured an invalid selector: > Consistently quote attribute selector values: [foo="bar"] instead of [foo=bar] (jqbug 8229).

Our [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS | CSS Coding conventions ]] don't include the a clear guideline on quoting or not quoting attribute selectors. There is an extensive article on when it is [[ https://mathiasbynens.be/notes/unquoted-attribute-values#css | valid to unquote attribute selectors ]] by Mathias Bynens: > a valid unquoted attribute value in CSS is any string of text that is not the empty string, is not just a hyphen (-), consists of escaped characters and/or characters matching /[-_\u00A0-\u10FFFF]/ entirely, and doesn’t start with a digit or two hyphens or a hyphen followed by a digit. Two questions: # Quote or unquote? ## Which quote – single or double? It would either make sense to consistently **quote all attribute selectors (with one type of quote)** and have CSS Minifier delete the syntactical sugar where applicable **or unqote per default where applicable** (majority of the cases apart from `content.externallinks.css` which doesn't seem to be in use any more. If we decide pro quoting we should also revisit guidelines on `url( image.png )` values there --- Further reading [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript#Quotes | JavaScript coding guidelines ]] pledge for single quotes on string literals, although it doesn't clarify on HTML constructs like ```lang=js $content.find( 'input[type="checkbox"]:not(.noshiftselect)' ).checkboxShiftClick(); ``` Src: [[ https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/src/mediawiki/page/ready.js;0f78272fddaa88d37a1c39b207cabe647e559312$34 | MW core ]] ```lang=js var $checkboxes = $( 'li input[type=checkbox]' ); ``` Src: [[ https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/src/mediawiki/mediawiki.checkboxtoggle.js;0f78272fddaa88d37a1c39b207cabe647e559312$15 | MW core ]] JavaScript coding conventions do include a specific sentence on [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript#Pitfalls | CSS attribute selectors pitfalls ]] in jQuery, though linking to an invalid jQuery bug, where the author featured an invalid selector: > Consistently quote attribute selector values: [foo="bar"] instead of [foo=bar] (jqbug 8229).

Our [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS | CSS Coding conventions ]] don't include the a clear guideline on quoting or not quoting attribute selectors. There is an extensive article on when it is [[ https://mathiasbynens.be/notes/unquoted-attribute-values#css | valid to unquote attribute selectors ]] by Mathias Bynens: > a valid unquoted attribute value in CSS is any string of text that is not the empty string, is not just a hyphen (-), consists of escaped characters and/or characters matching /[-_\u00A0-\u10FFFF]/ entirely, and doesn’t start with a digit or two hyphens or a hyphen followed by a digit. Two questions: # Quote or unquote? ## Which quote – single or double? It would either make sense to consistently **quote all attribute selectors (with one type of quote)** and have CSS Minifier delete the syntactical sugar where applicable **or unqote per default where applicable** (majority of the cases apart from `content.externallinks.css` which doesn't seem to be in use any more. If we decide pro quoting we should also revisit guidelines on `url( image.png )` values there --- Further reading [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript#Quotes | JavaScript coding guidelines ]] pledge for single quotes on string literals, although it doesn't clarify on HTML constructs like ```lang=js $content.find( 'input[type="checkbox"]:not(.noshiftselect)' ).checkboxShiftClick(); ``` Src: [[ https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/src/mediawiki/page/ready.js;0f78272fddaa88d37a1c39b207cabe647e559312$34 | MW core ]] ```lang=js var $checkboxes = $( 'li input[type=checkbox]' ); ``` Src: [[ https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/src/mediawiki/mediawiki.checkboxtoggle.js;0f78272fddaa88d37a1c39b207cabe647e559312$15 | MW core ]] CC/JSJavaScript coding conventions do include a specific sentence on [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/JavaScript#Pitfalls | CSS attribute selectors pitfalls ]] in jQuery, though linking to an invalid jQuery bug, where the author featured an invalid selector: > Consistently quote attribute selector values: [foo="bar"] instead of [foo=bar] (jqbug 8229).