CSS Validator Breakout

28 Oct 2015


Takeharu_Igari(Lei_Hauoli), Kaz_Ashimura(W3C), Daniel_Glazman(Disruptive_Innovation), Kazumasa_Okabe(Yahoo!_Japan), Yuma_Inagaki(ORO), Satoshi_Ohata(Internet_Academy), Katsuya_Hino(Toshiba), Jet_Millegas(Mozilla), Takeshi_Kurosawa(Mitsue-Links), Myles_C._Maxfield(Apple), Hyojin_Song(LG_Electronics), Sangjo_Park(LG_Electronics), Takahiro_Aritaki(Internet_Academy), Paul_Changjin_Jeong(HTML5_Forum), Jintae_Jung(We_Planet), Jeff_Xu(Kobo), Tadashi_Adachihara(Sony)


igari: problems
... can't validate content modified by JS
... Can't validate computed styles
... can't validate matching of style and style for each HTML Tag
... while validation should be done automatically
... as you know, there is the W3C CSS Validation Service
... @@@v

igari: also Jet Brains
... case study
... case 1-1: needless styles
... Q: value of display property of element?
... that is block
... unnecessary style should be removed
... but there is some potential harm with removing it
... case 1-2: needless styles
... Q: What is value of display property of element?
... @@@p

daniel: value of display property of is block?
... gecko returns inline
... chrome returns block
... maybe it's a bug of chrome

igari: yes, I used chrome to check this...
... moving ahead
... case 1-3: needless styles
... Q: What is value of 'width' property of element?
... A: auto
... Case 2-1: Risky Styles
... Q: Pseudo element into empty element?
... A: this is buggy
... case 2-2: Risky Styles
... case 3-1: Mistake in Media Query
... Q: no parent table-cell in media query
... case 3-2: mistake after JS
... Q: after inserting DOM by JS
... invalid styles give you: meaningless patch, interrupting creative ideas,...
... resolution!

<scribe> ... new style validator

UNKNOWN_SPEAKER: validation on the browser


igari: stylev/Style-Validator/page/demo-simple.html
... Style Validator can detect invalid style
... some JS script is installed and we can validate the CSS dynamically
... Introduction
... this is a chrome extension
... but this mechanism has some week points
... not an official standard
... no document available and depends on each developers who use this
... Validation Rule Site
... can manage the rules for validation here
... and save the configured rules as a JSON format

daniel: question on values within selectors

(write down an example on the white board)

.foo { 
  content; attr(p.bla, title);

daniel: what if there is no p.bla defined?

igari: can't detect that currently
... but would try to implement if there is a need

takeshi: does this tool have a capability of reporting?

igari: no at the moment
... but am planning to add reporting capability

myles: what kind of mechanism you use to get the style?

igari: using getComputedStyle and getUncomputedStyle
... the latter is my own developed function
... getUncomputedStyle uses getComputedStyle and some CSS rules

myles: daniel gave an example
... and wondering about the future capability
... intend to check everything

igari: would feedback from you :)

daniel: this kind of style check is not syntax check
... so it's a manual research and a bit difficult
... can all the requirements expressed in a machine-readable manner?

igari: would make this tool an open source and get help from people

daniel: what is your motivation/rationale for this work?

igari: this is based on real use cases coming from my company's colleagues

adachihara: wondering about the possible validator for the validation rule tool

igari: yes, the rule tool has that capability

adachihara: wondering about multiple the case with multiple cases match

@1: is the target of this tool a developer, or somebody doesn't have CSS knowledge?

igari: currently developers

@1: publishers, etc., who don't have CSS knowledges also may want to use this

ohata: who manages the rules?

<myles> glazou: is there a way to get specified style in CSS? i don't know

igari: there are already pre-defined rules within the validation rules tool
... so you don't have to specify the rules
... if you need to add some tweaks, you can

ohata: is this already publicly available?

<glazou> myles: you mean from a given element ?

<myles> yes

<myles> glazou: glazou: i guess there would be many specified styles depending on selector specificity

igari: not yet. but planning to publish by the end of this year

jeff: does this tool parse the CSS?

<glazou> short answer is no ; there used to be private interfaces for that in Gecko but they were removed ; you could always of course work from the OM of the stylesheets, find the rules matching and do the first part of the cascade by yourself

igari: no, but this tool use the browser's parsing results

<glazou> expensive but doable

<myles> glazou: you would have to evaluate the selectors yourself

<myles> (if you went with the CSSOM approach)

<glazou> only thing you have to do is call matchSelector() :-)

<myles> yes, yes :)

<glazou> BUT you have to parse the selector to compute specificity since, damn it, we never provided an API for that

igari: and check the validness based on that

<glazou> and then balance all specificities and importance for rules that apply

<glazou> and get the result of that

daniel: if somebody implements a browser-based inspector inside (=natively) browser, what do you think?

igari: can't answer at the moment...

daniel: wondering users would be happy with this tool
... there is legal instructions for accessibility
... but no restriction for CSS validation

igari: that's true

kaz: maybe even more useful if authoring tools have this capability

[ adjourned ]

Summary of Action Items

[End of minutes]

Minutes formatted by David Booth's scribe.perl version 1.128 (CVS log)
$Date: 2015/11/09 08:01:10 $