Download as PDF, PPTX
Uploaded byTakeharu Igari
Style Validator at breakout session of TPAC2015
Takeharu Igari presents a style validator tool to help address problems with current CSS validation methods. The style validator can validate computed styles, validate that styles match HTML tags, and validate styles after DOM modification with JavaScript. It aims to help engineers by catching invalid styles early to prevent bugs and wasted work. Igari demonstrates the tool and invites others to contribute to the open source project to help improve CSS and web development.
More Related Content
![Goldfish Acte[1]](https://cdn.slidesharecdn.com/ss_thumbnails/goldfishacte1-13003239083735-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Style Validator at breakout session of TPAC2015
- 1. Style Validator CSS Validationin the Browser Igari Takeharu TPAC2015 in Sapporo
- 2. Takeharu Igari • Front-endEngineer (8years of carrier) • Evangelist • General Manager in Vanguard Development Division I’m sorry that I can not listening english well
- 3. What’re the problems ofcurrent CSS Validation
- 4. Three problems of currentCSS Validator • Can’t validate content that is modified by JavaScript • Can’t validate computed styles • Can’t validate matching of style and style for each HTML Tag So, valid CSS is too complicated.
- 7.
- 8. Case1-1: Needless Styles •Q. What is value of display property of DIV element? In this case, display: inline; is needless style A. block
- 9. Case1-2: Needless Styles •Q. What is value of display property of P element? A. block In this case, display: inline; is needless style
- 10. Case1-3: Needless Styles •Q. What is value of width property of span element? A. auto In this case, width has to be removed or span has to be block
- 11. • Q. Pseudoelement into empty element is OK? • Correct one Case2-1: Risky Styles A.No. this is Buggy.
- 12. Case2-2: Risky Styles •Q. No parent table-cell is OK? A.No. this is Buggy • Here is correct one.
- 13. • No parenttable-cell in Media Query • Correct one Case3-1: Mistake in Media Query No parent table-cell…
- 14. • Before JavaScript Case3−2:Mistake after Javascript
- 15. • After insertingDOM by JavaScript Case3−2: Mistake after Javascript display inline in table…
- 16. Invalid styles giveyou… • Meaningless patch • Interrupting creative ideas • Loss of valuable engineer’s life
- 17.
- 18. Style Validator • Validationof computed style • Validation of matching of style and style • Validation of while tracking DOM modification. (e.g. after modifying DOM by JavaScript)
- 19.
- 20.
- 21.
- 22. Week point • Bynon-official specifications • It is depend on work field engineer’s knowledge.
- 23. Anybody can editrules
- 24.
- 25. Open Source Project •This will be a open source project soon. • So, Please join as a Contributor • Finally, I wish that the Style Validator helps work field engineer & CSS & Web.
- 26. Thanks for yourpatient! • Please feel free to contact me igari.takeharu@gmail.com https://www.facebook.com/IgariTakeharu • Official Website http://style-validator.github.io/ • Github https://github.com/Style-Validator/