https://github.com/devansvd/html-elements
To Visualize Cross Browser Rendering - An Html Experiment
https://github.com/devansvd/html-elements
cross-browser-rendering cross-browser-testing html-elements html-reference svd-edu
Last synced: 11 months ago
JSON representation
To Visualize Cross Browser Rendering - An Html Experiment
- Host: GitHub
- URL: https://github.com/devansvd/html-elements
- Owner: devansvd
- License: mit
- Created: 2020-05-24T12:38:13.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-06T11:09:12.000Z (over 5 years ago)
- Last Synced: 2025-01-21T08:07:50.545Z (about 1 year ago)
- Topics: cross-browser-rendering, cross-browser-testing, html-elements, html-reference, svd-edu
- Language: HTML
- Homepage: https://devansvd.github.io/html-elements
- Size: 1.7 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Visualize Cross Browser Rendering
Visualize html cross browser rendering of each elements Specifically, how much space it occupies like marigin, padding, border to each html elements in different browsers :-)
---
[![MIT License][license-badge]][license]
_Did you know html elements had an element named [element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference) ?_ **Well ! I didn't.**
## Demo:
[Visualize Cross browser Rendering](https://devansvd.github.io/html-elements) - https://devansvd.github.io/html-elements
## Frustration:
- Ever wonder, when you begin writing `markup's` by skimming through the `html` docs, Oh! that's a lot of tags and faced **why the hell the height, margin-top or margin-bottom not applied to span elements ?**
- Then, when you tried to place an html element in certain tiny space hoping it would fit there but it collapses the whole thing and took too much space. **damn !!!**
- Also, Finally when you stuffed that element thing in the top right corner, Said to yourself **Yay!! I did it**, then viewed it in some other browser - **Man !!** Cross browsers.
- Well, this select box is rendered ugly in this specific browser. why ? have to tweak css **Ouch...Ouch...Ouch...**
- `Inline` vs `block` vs `Inline-block` **Oh my !**
And then feel like time to read the docs properly. _hahaha_.
> Night-mare. Real Nightmare. We all been there down the road, I guess.
---
## Questions need answers:
- Want to know how much each browsers apply `margin`, `padding`, `borders` and how it styles the UI for a specific element.
- That's a lot of elements in there how many of them are `inline` ? how many are them are `block` elements ?
---
## Time to overcome:
While finally reading the docs, I was surprised to see few things I did not know before ...
- The `inline` and `block` elements are removed to avoid some confusion from `html5 specs`, new `content categories` are introduced for grouping elements.
- Many `input` types specifically `week picker`.
- `Datalist` as an `autocomplete`, `filter`, `dropdown`, `custom input that's` a handy element.
- `Fieldset` - this draws a nice UI around the element.
- Subtitle `tracks` for a video element, wow! just wow.
- Embedding a whole pdf via `Object` element.
- `Mapping` certain `areas` of an image to make indications. Nice.
- `Details` collapse - expander
- Tables don't have default `borders`. ew
- `Marquee` text dance around. Interesting.
---
## Solution:
- A page to view all the element to reveal their `cross-browser` default rendering without any fancy `css`.
- By placing `each element` Intentionally next to each other and see which are all `inline elements` ? which are all `block elements` ?
---
## Demo:
[Visualize Cross browser Rendering](https://devansvd.github.io/html-elements) - https://devansvd.github.io/html-elements
**Note:** Intentionally not be mobile responsive.
- This is not suppose to be used as a reference(use MDN for that), Intended to visualize default cross browser rendering of each elements Specifically, how much space it occupies like `marigin`, `padding`, `border`.
- Intentionally each elements placed next to each other(`Span tag` is occupied as their heading) to see if that specific element is `inline` or `block` element. **So don't think like page is not aligned properly, What the Hell ?** _Intentionally Ugly_.
Mdn docs are really so good, Credits to them.
I guess I could say this is an **experiment with html elements**.
Feel free to share your thoughts and feedback.
I'm `Devan` - Aka [devansvd](https://github.com/devansvd).
## License
[`MIT`][license]
[license-badge]: https://img.shields.io/npm/l/eslint-config-devansvd.svg?style=flat-square
[license]: https://github.com/devansvd/eslint-config-devansvd/blob/master/LICENSE