GithubHelp home page GithubHelp logo

Needs client side polyfill about html6 HOT 9 OPEN

oscargodson avatar oscargodson commented on June 10, 2024
Needs client side polyfill

from html6.

Comments (9)

m93a avatar m93a commented on June 10, 2024

I've made a little parser in JavaScript. It's not finished yet.
http://github.com/m93a/nml-parser

EDIT: Updating to 1.1.0, now it can export DOMDocument.

It's just a parser but it can be used:

  • to make a html6-html5 convertor
  • as a node.js html6 module
  • in a browser extension for html6 compatibility
  • to use NML in ajax, instead of XML
  • to make your disk 20kB smaller
  • and much more...

from html6.

OscarGodson avatar OscarGodson commented on June 10, 2024

Looks really cool. Hope to see more :)

from html6.

m93a avatar m93a commented on June 10, 2024

But before html6-html5 convertor, we need a CSS parser. And maybe a JS framework.

from html6.

OscarGodson avatar OscarGodson commented on June 10, 2024

Why do we need a CSS parser? CSS works fine with XML. And why a whole framework?

from html6.

m93a avatar m93a commented on June 10, 2024

OK, we can use xhtml with both html and form namespace prefixes set to http://www.w3.org/1999/xhtml. There is just a problem with splitting media tag to img, video and audio.
We have to:

  • rewrite all the CSS selectors (media -> img, video, audio and #foo -> [id=foo])
  • make document.getElementsByTagNameNS('media',"http://www.w3.org/1999/xhtml"); select img, video and audio

Oh and also there's a problem with programmatically creating elements with ns prefix. That's impossible!

This comment was editted 5 times.

from html6.

OscarGodson avatar OscarGodson commented on June 10, 2024

CSS selectors need to be general and work across XML. CSS doesn't have predefined elements you can select for example. You can style those elements fine right now: http://jsbin.com/iCuDEYE/2/edit

The only thing I can think of is adding 1 selector to make html\:foo a little nicer to write. I'm not sure what you mean by your 2nd example of the ID.

The JS thing should just be part of the polyfill.

from html6.

m93a avatar m93a commented on June 10, 2024

I don't mean creating a new spec - our problem is that all media tags will be replaced by a) img b) audio or c) video tag so your styles won't match any element. I don't see any way to make media tag work without changing DOM. That means that the convertor has to change every html:media to img, video or audio.

And the second problem with css is that #foo doesn't work with xml (in all modern browsers - that means all the browsers but MSIE).

Do you understand?

EDIT: Oops, to fast reading. I thought you said that CSS works across all the XML. My fault, correcting the comment.

from html6.

m93a avatar m93a commented on June 10, 2024

I've just found an alternative way

  1. Leave html:media unchanged
  2. Add a tag like abc:xyz at the end of the body element
  3. Choose the type of media tag (image, video or audio)
  4. Create image, video or audio tag as a child of abc:xyz
  5. Make the video/audio/image tag cover the media using javascript and css absolute position

Pros:

  • no css modifications needed
  • no JS framework needed

Cons:

  • not a valid xHTML
  • abc:xyz can be still detected using JavaScript
  • media's computed styles have to be checked every hunderth of a second (not exactly :D)
  • no animation and transition support

from html6.

m93a avatar m93a commented on June 10, 2024

After a short break (not even a year), I've got a new update!
HTML6 Polyfill Beta can be found at m93a/nml-polyfill.

from html6.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.