UMOJI – Unicode Emoji

UMOJI (= Unicode Emoji) is a nice little website at umoji.eladkarako.com gathering only the fun Unicode characters

Looking for all the fun Unicode characters is a waste of time,
being creative with text is a gr8 way to push some humor into your work and life (and code..)

started as a post named icompile.eladkarako.com/useful-char-map/

I’ve made a plain but useful website the allow quick COPY&&PASTE of most useful Unicode-Emojis (either low or high range) including some letters and math symbols too, because you never know when those stuff will be useful,
excluding most of the “letters based characters” (–that quote is not very reasonable..)

and also bidi control chars, and stuff that renders as empty square on fonts that are not “Courier New”

the entire page is “content-editable”, so you can use it as a makeshift Unicode-supported text-editor.
[You could easily add some text around and copy it (it’s just in your pc, it won’t effect the server version) this way you won’t need to look for an editor (if you’re on mac or linux..it’s kind’a helpful) that is Unicode-supported, set it and {copy char, switch window}:repeat X times.
just edit your stuff directly in the page]

mess/miss/mash? just reload the page.


December 2016 update:
New version available at https://eladkarako.github.io/umoji/ and as usual at http://umoji.eladkarako.com.

ContentEditable And “ReadOnly”? YES!

making container, any HTML container (PRE, DIV, SPAN) contenteditable="true" is a very appealing opportunity of making the most of the most cutting-edge CSS3-styling and animation (!!) along with easy user-interaction, allowing easily using CTRL+A,

code is easy enough to program (REALLY EASY) but apparently
no one has came across thinking of this solution,
while the phrase “thinking out of the box” is dropped quite often,
it is a rare quality now days..

every previous solution by *others* just include the straightforward solution (a.k.a “head in the wall”) identifying every single key-combination that “is allowed” (for example CTRL+A) and blocking (preventDefault, cancelBubble, stopPropagation :| and of course return false) by the nature of filtering, you are also blocking… F5 (refresh the page) PageDown, PageUp, Arrow-Keys navigations, F12 for developer’s-console…
Oh $hit!!! now I have to specifically allow all those **!@# ???

well.. NOPE!..
…think simpler

because simple is always better.

so what if the user “want to change” the content,
just change it back, fast enough,
restoring the original text might be visible or flick,
…but that’s OK! (also, – due to smart selecting of the event implementing – it won’t..)

..also! You can always add more event-handlers (touch start?? nhaaa! too lazzzzyyyy)

have a look on the following code, I’ve used it in one of my other posts:

<style>
  pre.code-like{
    -webkit-text-stroke: .2px rgba(0,0,0,.5);
    background: rgba(245,245,211,.1);
    border-radius: 2px;
    border: 1px dashed rgba(214,214,214,.7);
    box-shadow: 1px 1px 1px rgba(0,0,0,.5),  -1px -1px 2px rgba(0,0,0,.2);
    color: #000000;
    font-family: Courier New,monospace;
    line-height: 1.3em;
    margin: 0;
    overflow-x: auto;
    padding: 5px;
    white-space: pre !important;
    word-break: normal !important;
    word-wrap: normal !important;
  }
</style>


<pre class="code-like" style='color:#000000;background:#ffffff;'><span style='color:#7f0055; '>&lt;?</span><span style='color:#7f0055; font-weight:bold; '>xml</span><span style='color:#7f0055; '> </span><span style='color:#7f0055; '>version</span><span style='color:#7f0055; '>=</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; font-weight:bold; '>1.0</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>?></span>
<span style='color:#7f0055; '>&lt;!</span><span style='color:#7f0055; font-weight:bold; '>DOCTYPE</span> <span style='color:#7f0055; font-weight:bold; '>cross-domain-policy</span> <span style='color:#7f0055; '>SYSTEM</span> <span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>http</span><span style='color:#2a00ff; '>:</span><span style='color:#7f0055; font-weight:bold; '>//</span><span style='color:#3f3fbf; '>www.adobe.com</span><span style='color:#3f3fbf; '>/xml/dtds/cross-domain-policy.dtd</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>cross-domain-policy</span><span style='color:#7f0055; '>></span>
  <span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>site-control</span> permitted-cross-domain-policies=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>all</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>/></span>
  <span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>allow-access-from</span> domain=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> to-ports=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> secure=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>false</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>/></span>
  <span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>allow-http-request-headers-from</span> domain=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> headers=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>*</span><span style='color:#2a00ff; '>"</span> secure=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>false</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>/></span>
<span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; '>cross-domain-policy</span><span style='color:#7f0055; '>></span>
</pre>


<script>
  function make_editable_readonly(element){
    element.backup_innerHTML = element.innerHTML;   /* backup before editable. */
    element.contenteditable = "true";               /* editable. CTRL+A is usable (FUN!) */

    element.onautocomplete                          /* what in the world could change the content? actually lot!.. */
  = element.onchange 
  = element.oncontextmenu 
  = element.oncopy 
  = element.oncuechange 
  = element.oncut 
  = element.ondrag 
  = element.ondragend 
  = element.ondrop 
  = element.onemptied 
  = element.onkeyup 
  = element.onmouseup 
  = element.onpaste 
  = element.onreset = function restore(){ 
                        if (element.innerHTML !== element.backup_innerHTML) 
                          element.innerHTML = element.backup_innerHTML;
                      };
  }
  
  make_editable_readonly(
    document.querySelector('pre.code-like')
  );
</script>

demo (you can view it in new tab or have a look it the source..)

I’ve actually initially thought it was a good idea to put the styling and script in this post (here…) ..too
but decided it too mata/”inception”

I’ve posted it also here:
http://stackoverflow.com/questions/4144271/disabling-paste-option-from-the-context-menu/34522284#34522284 (see the alternatives.. :| )

Another Take On Label-Design Pure CSS3 and HTML5 Markers

<style>
[data-role="note"]{
  position: relative;
  font-style: italic;
  margin-left: 2em;
  padding-left: 50px;
}
[data-role="note"]::before {
  content: attr(data-label)" "attr(data-icon);
  text-transform: capitalize;

  position: absolute;
  top: -0.2em;
  left: -1.5em;
  padding: 1px 5px;

  letter-spacing: 1px;
  transform: rotate(-8deg);

  border: 1px solid rgba(0,128,0,.8);
  border-radius: 4px;
  box-shadow: 1px  1px 3px rgba(0,0,0,.8)  ,
             -1px -1px 1px rgba(0,0,0,.4)  ;
}

[data-role="note"][data-color="green"]        { color: rgba(0,128,0,.9);      background: rgba(221,255,221,.8);   }
[data-role="note"][data-color="green"]::before{ color: rgba(255,255,255,.9);  background: rgba(0,128,0,.8);       }

</style>

<p data-role="note" data-color="green" data-icon="?" data-label="FIY">
 The <a href="#mime-type-portion">MIME type portion</a> of a <a href="#parsable-mime-type">parsable MIME type</a>
 excludes any and all <a href="#parameters">parameters</a>.
</p>

taking “icons” (Unicode supported characters) from http://icompile.eladkarako.com/useful-char-map/ :)

Vary: Accept-Encoding

Specify a Vary: Accept-Encoding header

bootstrapcdn-vary-accept-encoding-2

Bugs in some public proxies may lead to compressed versions of your resources being served to users that don’t support compression. Specifying the Vary: Accept-Encoding header instructs the proxy to store both a compressed and uncompressed version of the resource.
Continue reading

All CSS Properties

Available also in gist.github.com/eladkarako/63dfb119291059468358

-apple-trailing-word
-epub-caption-side
-epub-hyphens
-epub-text-combine
-epub-text-emphasis
-epub-text-emphasis-color
-epub-text-emphasis-style
-epub-text-orientation
-epub-text-transform
-epub-word-break
-epub-writing-mode
-internal-marquee-direction
-internal-marquee-increment
-internal-marquee-repetition
-internal-marquee-speed
-internal-marquee-style
-khtml-align-content
-khtml-align-items
-khtml-align-self
-khtml-alt
-khtml-animation
-khtml-animation-delay
-khtml-animation-direction
-khtml-animation-duration
-khtml-animation-fill-mode
-khtml-animation-iteration-count
-khtml-animation-name
-khtml-animation-play-state
-khtml-animation-timing-function
-khtml-animation-trigger
-khtml-app-region
-khtml-appearance
-khtml-aspect-ratio
-khtml-backdrop-filter
-khtml-backface-visibility
-khtml-background-clip
-khtml-background-composite
-khtml-background-origin
-khtml-background-size
-khtml-binding
-khtml-border-after
-khtml-border-after-color
-khtml-border-after-style
-khtml-border-after-width
-khtml-border-before
-khtml-border-before-color
-khtml-border-before-style
-khtml-border-before-width
-khtml-border-bottom-colors
-khtml-border-bottom-left-radius
-khtml-border-bottom-right-radius
-khtml-border-end
-khtml-border-end-color
-khtml-border-end-style
-khtml-border-end-width
-khtml-border-fit
-khtml-border-horizontal-spacing
-khtml-border-image
-khtml-border-left-colors
-khtml-border-radius
-khtml-border-right-colors
-khtml-border-start
-khtml-border-start-color
-khtml-border-start-style
-khtml-border-start-width
-khtml-border-top-colors
-khtml-border-top-left-radius
-khtml-border-top-right-radius
-khtml-border-vertical-spacing
-khtml-box-align
-khtml-box-decoration-break
-khtml-box-direction
-khtml-box-flex
-khtml-box-flex-group
-khtml-box-lines
-khtml-box-ordinal-group
-khtml-box-orient
-khtml-box-pack
-khtml-box-reflect
-khtml-box-shadow
-khtml-box-sizing
-khtml-clip-path
-khtml-color-correction
-khtml-column-axis
-khtml-column-break-after
-khtml-column-break-before
-khtml-column-break-inside
-khtml-column-count
-khtml-column-fill
-khtml-column-gap
-khtml-column-progression
-khtml-column-rule
-khtml-column-rule-color
-khtml-column-rule-style
-khtml-column-rule-width
-khtml-column-span
-khtml-column-width
-khtml-columns
-khtml-cursor-visibility
-khtml-dashboard-region
-khtml-filter
-khtml-flex
-khtml-flex-basis
-khtml-flex-direction
-khtml-flex-flow
-khtml-flex-grow
-khtml-flex-shrink
-khtml-flex-wrap
-khtml-float-edge
-khtml-flow-from
-khtml-flow-into
-khtml-font-feature-settings
-khtml-font-kerning
-khtml-font-size-delta
-khtml-font-smoothing
-khtml-font-variant-ligatures
-khtml-force-broken-image-icon
-khtml-grid
-khtml-grid-area
-khtml-grid-auto-columns
-khtml-grid-auto-flow
-khtml-grid-auto-rows
-khtml-grid-column
-khtml-grid-column-end
-khtml-grid-column-start
-khtml-grid-row
-khtml-grid-row-end
-khtml-grid-row-start
-khtml-grid-template
-khtml-grid-template-areas
-khtml-grid-template-columns
-khtml-grid-template-rows
-khtml-highlight
-khtml-hyphenate-character
-khtml-hyphenate-limit-after
-khtml-hyphenate-limit-before
-khtml-hyphenate-limit-lines
-khtml-hyphens
-khtml-image-region
-khtml-initial-letter
-khtml-justify-content
-khtml-justify-items
-khtml-justify-self
-khtml-line-align
-khtml-line-box-contain
-khtml-line-break
-khtml-line-clamp
-khtml-line-grid
-khtml-line-snap
-khtml-locale
-khtml-logical-height
-khtml-logical-width
-khtml-margin-after
-khtml-margin-after-collapse
-khtml-margin-before
-khtml-margin-before-collapse
-khtml-margin-bottom-collapse
-khtml-margin-collapse
-khtml-margin-end
-khtml-margin-start
-khtml-margin-top-collapse
-khtml-marquee
-khtml-marquee-direction
-khtml-marquee-increment
-khtml-marquee-repetition
-khtml-marquee-speed
-khtml-marquee-style
-khtml-mask
-khtml-mask-box-image
-khtml-mask-box-image-outset
-khtml-mask-box-image-repeat
-khtml-mask-box-image-slice
-khtml-mask-box-image-source
-khtml-mask-box-image-width
-khtml-mask-clip
-khtml-mask-composite
-khtml-mask-image
-khtml-mask-origin
-khtml-mask-position
-khtml-mask-position-x
-khtml-mask-position-y
-khtml-mask-repeat
-khtml-mask-repeat-x
-khtml-mask-repeat-y
-khtml-mask-size
-khtml-mask-source-type
-khtml-max-logical-height
-khtml-max-logical-width
-khtml-min-logical-height
-khtml-min-logical-width
-khtml-nbsp-mode
-khtml-opacity
-khtml-order
-khtml-orient
-khtml-outline-radius-bottomleft
-khtml-outline-radius-bottomright
-khtml-outline-radius-topleft
-khtml-outline-radius-topright
-khtml-overflow-scrolling
-khtml-padding-after
-khtml-padding-before
-khtml-padding-end
-khtml-padding-start
-khtml-perspective
-khtml-perspective-origin
-khtml-perspective-origin-x
-khtml-perspective-origin-y
-khtml-print-color-adjust
-khtml-region-break-after
-khtml-region-break-before
-khtml-region-break-inside
-khtml-region-fragment
-khtml-rtl-ordering
-khtml-ruby-position
-khtml-scroll-snap-coordinate
-khtml-scroll-snap-destination
-khtml-scroll-snap-points-x
-khtml-scroll-snap-points-y
-khtml-scroll-snap-type
-khtml-shape-image-threshold
-khtml-shape-margin
-khtml-shape-outside
-khtml-stack-sizing
-khtml-svg-shadow
-khtml-tab-size
-khtml-tap-highlight-color
-khtml-text-align-last
-khtml-text-combine
-khtml-text-decoration
-khtml-text-decoration-color
-khtml-text-decoration-line
-khtml-text-decoration-skip
-khtml-text-decoration-style
-khtml-text-decorations-in-effect
-khtml-text-emphasis
-khtml-text-emphasis-color
-khtml-text-emphasis-position
-khtml-text-emphasis-style
-khtml-text-fill-color
-khtml-text-justify
-khtml-text-orientation
-khtml-text-security
-khtml-text-size-adjust
-khtml-text-stroke
-khtml-text-stroke-color
-khtml-text-stroke-width
-khtml-text-underline-position
-khtml-touch-callout
-khtml-transform
-khtml-transform-origin
-khtml-transform-origin-x
-khtml-transform-origin-y
-khtml-transform-origin-z
-khtml-transform-style
-khtml-transition
-khtml-transition-delay
-khtml-transition-duration
-khtml-transition-property
-khtml-transition-timing-function
-khtml-user-drag
-khtml-user-focus
-khtml-user-input
-khtml-user-modify
-khtml-user-select
-khtml-window-dragging
-khtml-window-shadow
-khtml-writing-mode
-moz-appearance
-moz-binding
-moz-border-bottom-colors
-moz-border-end
-moz-border-end-color
-moz-border-end-style
-moz-border-end-width
-moz-border-left-colors
-moz-border-right-colors
-moz-border-start
-moz-border-start-color
-moz-border-start-style
-moz-border-start-width
-moz-border-top-colors
-moz-box-align
-moz-box-direction
-moz-box-flex
-moz-box-ordinal-group
-moz-box-orient
-moz-box-pack
-moz-column-count
-moz-column-fill
-moz-column-gap
-moz-column-rule
-moz-column-rule-color
-moz-column-rule-style
-moz-column-rule-width
-moz-column-width
-moz-columns
-moz-control-character-visibility
-moz-float-edge
-moz-force-broken-image-icon
-moz-hyphens
-moz-image-region
-moz-margin-end
-moz-margin-start
-moz-math-display
-moz-math-variant
-moz-orient
-moz-osx-font-smoothing
-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-moz-padding-end
-moz-padding-start
-moz-script-level
-moz-script-min-size
-moz-script-size-multiplier
-moz-stack-sizing
-moz-tab-size
-moz-text-align-last
-moz-text-decoration-color
-moz-text-decoration-line
-moz-text-decoration-style
-moz-text-size-adjust
-moz-transform
-moz-user-focus
-moz-user-input
-moz-user-modify
-moz-user-select
-moz-window-dragging
-moz-window-shadow
-ms-accelerator
-ms-animation
-ms-animation-delay
-ms-animation-direction
-ms-animation-duration
-ms-animation-fill-mode
-ms-animation-iteration-count
-ms-animation-name
-ms-animation-play-state
-ms-animation-timing-function
-ms-appearance
-ms-backface-visibility
-ms-background-position-x
-ms-background-position-y
-ms-behavior
-ms-binding
-ms-block-progression
-ms-border-bottom-colors
-ms-border-left-colors
-ms-border-right-colors
-ms-border-top-colors
-ms-box-align
-ms-box-direction
-ms-box-flex
-ms-box-ordinal-group
-ms-box-orient
-ms-box-pack
-ms-column-count
-ms-column-fill
-ms-column-gap
-ms-column-rule-color
-ms-column-rule-style
-ms-column-rule-width
-ms-column-width
-ms-content-zoom-chaining
-ms-content-zoom-limit
-ms-content-zoom-limit-max
-ms-content-zoom-limit-min
-ms-content-zoom-snap
-ms-content-zoom-snap-points
-ms-content-zoom-snap-type
-ms-content-zooming
-ms-filter
-ms-flex
-ms-flex-align
-ms-flex-direction
-ms-flex-flow
-ms-flex-item-align
-ms-flex-line-pack
-ms-flex-negative
-ms-flex-order
-ms-flex-pack
-ms-flex-positive
-ms-flex-preferred-size
-ms-flex-wrap
-ms-float-edge
-ms-flow-from
-ms-flow-into
-ms-font-feature-settings
-ms-force-broken-image-icon
-ms-grid-column
-ms-grid-column-align
-ms-grid-column-span
-ms-grid-columns
-ms-grid-layer
-ms-grid-row
-ms-grid-row-align
-ms-grid-row-span
-ms-grid-rows
-ms-high-contrast-adjust
-ms-hyphenate-limit-chars
-ms-hyphenate-limit-lines
-ms-hyphenate-limit-zone
-ms-hyphens
-ms-image-region
-ms-ime-align
-ms-ime-mode
-ms-interpolation-mode
-ms-layout-flow
-ms-layout-grid
-ms-layout-grid-char
-ms-layout-grid-line
-ms-layout-grid-mode
-ms-layout-grid-type
-ms-line-break
-ms-orient
-ms-outline-radius-bottomleft
-ms-outline-radius-bottomright
-ms-outline-radius-topleft
-ms-outline-radius-topright
-ms-overflow-style
-ms-overflow-x
-ms-overflow-y
-ms-perspective
-ms-perspective-origin
-ms-perspective-origin-x
-ms-perspective-origin-y
-ms-progress-appearance
-ms-scroll-chaining
-ms-scroll-limit
-ms-scroll-limit-x-max
-ms-scroll-limit-x-min
-ms-scroll-limit-y-max
-ms-scroll-limit-y-min
-ms-scroll-rails
-ms-scroll-snap-points-x
-ms-scroll-snap-points-y
-ms-scroll-snap-type
-ms-scroll-snap-x
-ms-scroll-snap-y
-ms-scroll-translation
-ms-scrollbar-3dlight-color
-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-track-color
-ms-stack-sizing
-ms-tab-size
-ms-text-align-last
-ms-text-autospace
-ms-text-combine-horizontal
-ms-text-justify
-ms-text-kashida-space
-ms-text-overflow
-ms-text-size-adjust
-ms-text-underline-position
-ms-touch-action
-ms-touch-select
-ms-transform
-ms-transform-origin
-ms-transform-origin-x
-ms-transform-origin-y
-ms-transform-origin-z
-ms-transform-style
-ms-transition
-ms-transition-delay
-ms-transition-duration
-ms-transition-property
-ms-transition-timing-function
-ms-user-focus
-ms-user-input
-ms-user-modify
-ms-user-select
-ms-window-dragging
-ms-window-shadow
-ms-word-break
-ms-word-wrap
-ms-wrap-flow
-ms-wrap-margin
-ms-wrap-through
-ms-writing-mode
-ms-zoom
-ms-zoom-animation
-o-appearance
-o-binding
-o-border-bottom-colors
-o-border-left-colors
-o-border-right-colors
-o-border-top-colors
-o-box-align
-o-box-direction
-o-box-flex
-o-box-ordinal-group
-o-box-orient
-o-box-pack
-o-column-count
-o-column-fill
-o-column-gap
-o-column-rule-color
-o-column-rule-style
-o-column-rule-width
-o-column-width
-o-float-edge
-o-force-broken-image-icon
-o-hyphens
-o-image-region
-o-orient
-o-outline-radius-bottomleft
-o-outline-radius-bottomright
-o-outline-radius-topleft
-o-outline-radius-topright
-o-stack-sizing
-o-tab-size
-o-text-align-last
-o-text-size-adjust
-o-user-focus
-o-user-input
-o-user-modify
-o-user-select
-o-window-dragging
-o-window-shadow
-webkit-align-content
-webkit-align-items
-webkit-align-self
-webkit-alt
-webkit-animation
-webkit-animation-delay
-webkit-animation-direction
-webkit-animation-duration
-webkit-animation-fill-mode
-webkit-animation-iteration-count
-webkit-animation-name
-webkit-animation-play-state
-webkit-animation-timing-function
-webkit-animation-trigger
-webkit-app-region
-webkit-appearance
-webkit-aspect-ratio
-webkit-backdrop-filter
-webkit-backface-visibility
-webkit-background-clip
-webkit-background-composite
-webkit-background-origin
-webkit-background-size
-webkit-binding
-webkit-border-after
-webkit-border-after-color
-webkit-border-after-style
-webkit-border-after-width
-webkit-border-before
-webkit-border-before-color
-webkit-border-before-style
-webkit-border-before-width
-webkit-border-bottom-colors
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
-webkit-border-end
-webkit-border-end-color
-webkit-border-end-style
-webkit-border-end-width
-webkit-border-fit
-webkit-border-horizontal-spacing
-webkit-border-image
-webkit-border-left-colors
-webkit-border-radius
-webkit-border-right-colors
-webkit-border-start
-webkit-border-start-color
-webkit-border-start-style
-webkit-border-start-width
-webkit-border-top-colors
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-vertical-spacing
-webkit-box-align
-webkit-box-decoration-break
-webkit-box-direction
-webkit-box-flex
-webkit-box-flex-group
-webkit-box-lines
-webkit-box-ordinal-group
-webkit-box-orient
-webkit-box-pack
-webkit-box-reflect
-webkit-box-shadow
-webkit-box-sizing
-webkit-clip-path
-webkit-color-correction
-webkit-column-axis
-webkit-column-break-after
-webkit-column-break-before
-webkit-column-break-inside
-webkit-column-count
-webkit-column-fill
-webkit-column-gap
-webkit-column-progression
-webkit-column-rule
-webkit-column-rule-color
-webkit-column-rule-style
-webkit-column-rule-width
-webkit-column-span
-webkit-column-width
-webkit-columns
-webkit-cursor-visibility
-webkit-dashboard-region
-webkit-filter
-webkit-flex
-webkit-flex-basis
-webkit-flex-direction
-webkit-flex-flow
-webkit-flex-grow
-webkit-flex-shrink
-webkit-flex-wrap
-webkit-float-edge
-webkit-flow-from
-webkit-flow-into
-webkit-font-feature-settings
-webkit-font-kerning
-webkit-font-size-delta
-webkit-font-smoothing
-webkit-font-variant-ligatures
-webkit-force-broken-image-icon
-webkit-grid
-webkit-grid-area
-webkit-grid-auto-columns
-webkit-grid-auto-flow
-webkit-grid-auto-rows
-webkit-grid-column
-webkit-grid-column-end
-webkit-grid-column-start
-webkit-grid-row
-webkit-grid-row-end
-webkit-grid-row-start
-webkit-grid-template
-webkit-grid-template-areas
-webkit-grid-template-columns
-webkit-grid-template-rows
-webkit-highlight
-webkit-hyphenate-character
-webkit-hyphenate-limit-after
-webkit-hyphenate-limit-before
-webkit-hyphenate-limit-lines
-webkit-hyphens
-webkit-image-region
-webkit-initial-letter
-webkit-justify-content
-webkit-justify-items
-webkit-justify-self
-webkit-line-align
-webkit-line-box-contain
-webkit-line-break
-webkit-line-clamp
-webkit-line-grid
-webkit-line-snap
-webkit-locale
-webkit-logical-height
-webkit-logical-width
-webkit-margin-after
-webkit-margin-after-collapse
-webkit-margin-before
-webkit-margin-before-collapse
-webkit-margin-bottom-collapse
-webkit-margin-collapse
-webkit-margin-end
-webkit-margin-start
-webkit-margin-top-collapse
-webkit-marquee
-webkit-marquee-direction
-webkit-marquee-increment
-webkit-marquee-repetition
-webkit-marquee-speed
-webkit-marquee-style
-webkit-mask
-webkit-mask-box-image
-webkit-mask-box-image-outset
-webkit-mask-box-image-repeat
-webkit-mask-box-image-slice
-webkit-mask-box-image-source
-webkit-mask-box-image-width
-webkit-mask-clip
-webkit-mask-composite
-webkit-mask-image
-webkit-mask-origin
-webkit-mask-position
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-mask-repeat
-webkit-mask-repeat-x
-webkit-mask-repeat-y
-webkit-mask-size
-webkit-mask-source-type
-webkit-max-logical-height
-webkit-max-logical-width
-webkit-min-logical-height
-webkit-min-logical-width
-webkit-nbsp-mode
-webkit-opacity
-webkit-order
-webkit-orient
-webkit-outline-radius-bottomleft
-webkit-outline-radius-bottomright
-webkit-outline-radius-topleft
-webkit-outline-radius-topright
-webkit-overflow-scrolling
-webkit-padding-after
-webkit-padding-before
-webkit-padding-end
-webkit-padding-start
-webkit-perspective
-webkit-perspective-origin
-webkit-perspective-origin-x
-webkit-perspective-origin-y
-webkit-print-color-adjust
-webkit-region-break-after
-webkit-region-break-before
-webkit-region-break-inside
-webkit-region-fragment
-webkit-rtl-ordering
-webkit-ruby-position
-webkit-scroll-snap-coordinate
-webkit-scroll-snap-destination
-webkit-scroll-snap-points-x
-webkit-scroll-snap-points-y
-webkit-scroll-snap-type
-webkit-shape-image-threshold
-webkit-shape-margin
-webkit-shape-outside
-webkit-stack-sizing
-webkit-svg-shadow
-webkit-tab-size
-webkit-tap-highlight-color
-webkit-text-align-last
-webkit-text-combine
-webkit-text-decoration
-webkit-text-decoration-color
-webkit-text-decoration-line
-webkit-text-decoration-skip
-webkit-text-decoration-style
-webkit-text-decorations-in-effect
-webkit-text-emphasis
-webkit-text-emphasis-color
-webkit-text-emphasis-position
-webkit-text-emphasis-style
-webkit-text-fill-color
-webkit-text-justify
-webkit-text-orientation
-webkit-text-security
-webkit-text-size-adjust
-webkit-text-stroke
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-text-underline-position
-webkit-touch-callout
-webkit-transform
-webkit-transform-origin
-webkit-transform-origin-x
-webkit-transform-origin-y
-webkit-transform-origin-z
-webkit-transform-style
-webkit-transition
-webkit-transition-delay
-webkit-transition-duration
-webkit-transition-property
-webkit-transition-timing-function
-webkit-user-drag
-webkit-user-focus
-webkit-user-input
-webkit-user-modify
-webkit-user-select
-webkit-window-dragging
-webkit-window-shadow
-webkit-writing-mode
align-content
align-items
align-self
alignContent
alignItems
alignSelf
alignment-baseline
alignmentBaseline
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
animationDelay
animationDirection
animationDuration
animationFillMode
animationIterationCount
animationName
animationPlayState
animationTimingFunction
appearance
backface-visibility
backfaceVisibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
backgroundAttachment
backgroundBlendMode
backgroundClip
backgroundColor
backgroundImage
backgroundOrigin
backgroundPosition
backgroundPositionX
backgroundPositionY
backgroundRepeat
backgroundRepeatX
backgroundRepeatY
backgroundSize
baseline-shift
baselineShift
binding
border
border-bottom-color
border-bottom-colors
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left-color
border-left-colors
border-left-style
border-left-width
border-right-color
border-right-colors
border-right-style
border-right-width
border-spacing
border-top-color
border-top-colors
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
borderBottom
borderBottomColor
borderBottomLeftRadius
borderBottomRightRadius
borderBottomStyle
borderBottomWidth
borderCollapse
borderColor
borderImage
borderImageOutset
borderImageRepeat
borderImageSlice
borderImageSource
borderImageWidth
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRadius
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderSpacing
borderStyle
borderTop
borderTopColor
borderTopLeftRadius
borderTopRightRadius
borderTopStyle
borderTopWidth
borderWidth
bottom
box-align
box-decoration-break
box-direction
box-flex
box-ordinal-group
box-orient
box-pack
box-shadow
box-sizing
boxShadow
boxSizing
buffered-rendering
bufferedRendering
caption-side
captionSide
clear
clip
clip-path
clip-rule
clipPath
clipRule
color
color-interpolation
color-interpolation-filters
color-rendering
colorInterpolation
colorInterpolationFilters
colorRendering
column-count
column-fill
column-gap
column-rule-color
column-rule-style
column-rule-width
column-width
content
counter-increment
counter-reset
counterIncrement
counterReset
cursor
cx
cy
direction
display
dominant-baseline
dominantBaseline
empty-cells
emptyCells
enableBackground
fill
fill-opacity
fill-rule
fillOpacity
fillRule
filter
flex
flex-basis
flex-direction
flex-grow
flex-shrink
flex-wrap
flexBasis
flexDirection
flexFlow
flexGrow
flexShrink
flexWrap
float
float-edge
flood-color
flood-opacity
floodColor
floodOpacity
font
font-family
font-feature-settings
font-kerning
font-language-override
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-weight
fontFamily
fontKerning
fontSize
fontStretch
fontStyle
fontVariant
fontVariantLigatures
fontWeight
force-broken-image-icon
glyph-orientation-horizontal
glyph-orientation-vertical
glyphOrientationHorizontal
glyphOrientationVertical
height
hyphens
image-orientation
image-region
image-rendering
imageRendering
ime-mode
isolation
justify-content
justifyContent
left
letter-spacing
letterSpacing
lighting-color
lightingColor
line-height
lineHeight
list-style-image
list-style-position
list-style-type
listStyle
listStyleImage
listStylePosition
listStyleType
margin
margin-bottom
margin-left
margin-right
margin-top
marginBottom
marginLeft
marginRight
marginTop
marker
marker-end
marker-mid
marker-offset
marker-start
markerEnd
markerMid
markerStart
mask
mask-type
maskType
max-height
max-width
maxHeight
maxWidth
maxZoom
min-height
min-width
minHeight
minWidth
minZoom
mix-blend-mode
mixBlendMode
object-fit
object-position
objectFit
objectPosition
opacity
order
orient
orientation
orphans
outline
outline-color
outline-offset
outline-radius-bottomleft
outline-radius-bottomright
outline-radius-topleft
outline-radius-topright
outline-style
outline-width
outlineColor
outlineOffset
outlineStyle
outlineWidth
overflow
overflow-wrap
overflow-x
overflow-y
overflowWrap
overflowX
overflowY
padding
padding-bottom
padding-left
padding-right
padding-top
paddingBottom
paddingLeft
paddingRight
paddingTop
page
page-break-after
page-break-before
page-break-inside
pageBreakAfter
pageBreakBefore
pageBreakInside
paint-order
paintOrder
perspective
perspective-origin
perspectiveOrigin
pointer-events
pointerEvents
position
quotes
r
resize
right
ruby-align
ruby-position
rx
ry
scroll-behavior
scroll-snap-coordinate
scroll-snap-destination
scroll-snap-points-x
scroll-snap-points-y
scroll-snap-type-x
scroll-snap-type-y
shape-image-threshold
shape-margin
shape-outside
shape-rendering
shapeImageThreshold
shapeMargin
shapeOutside
shapeRendering
size
speak
src
stack-sizing
stop-color
stop-opacity
stopColor
stopOpacity
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
strokeDasharray
strokeDashoffset
strokeLinecap
strokeLinejoin
strokeMiterlimit
strokeOpacity
strokeWidth
tab-size
tabSize
table-layout
tableLayout
text-align
text-align-last
text-anchor
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-orientation
text-overflow
text-rendering
text-shadow
text-size-adjust
text-transform
textAlign
textAnchor
textDecoration
textIndent
textOverflow
textRendering
textShadow
textTransform
top
touch-action
touchAction
transform
transform-origin
transform-style
transformOrigin
transformStyle
transition
transition-delay
transition-duration
transition-property
transition-timing-function
transitionDelay
transitionDuration
transitionProperty
transitionTimingFunction
unicode-bidi
unicodeBidi
unicodeRange
user-focus
user-input
user-modify
user-select
userZoom
vector-effect
vectorEffect
vertical-align
verticalAlign
visibility
webkitAppRegion
webkitAppearance
webkitBackgroundClip
webkitBackgroundComposite
webkitBackgroundOrigin
webkitBorderAfter
webkitBorderAfterColor
webkitBorderAfterStyle
webkitBorderAfterWidth
webkitBorderBefore
webkitBorderBeforeColor
webkitBorderBeforeStyle
webkitBorderBeforeWidth
webkitBorderEnd
webkitBorderEndColor
webkitBorderEndStyle
webkitBorderEndWidth
webkitBorderHorizontalSpacing
webkitBorderImage
webkitBorderStart
webkitBorderStartColor
webkitBorderStartStyle
webkitBorderStartWidth
webkitBorderVerticalSpacing
webkitBoxAlign
webkitBoxDecorationBreak
webkitBoxDirection
webkitBoxFlex
webkitBoxFlexGroup
webkitBoxLines
webkitBoxOrdinalGroup
webkitBoxOrient
webkitBoxPack
webkitBoxReflect
webkitClipPath
webkitColumnBreakAfter
webkitColumnBreakBefore
webkitColumnBreakInside
webkitColumnCount
webkitColumnGap
webkitColumnRule
webkitColumnRuleColor
webkitColumnRuleStyle
webkitColumnRuleWidth
webkitColumnSpan
webkitColumnWidth
webkitColumns
webkitFilter
webkitFontFeatureSettings
webkitFontSizeDelta
webkitFontSmoothing
webkitHighlight
webkitHyphenateCharacter
webkitLineBoxContain
webkitLineBreak
webkitLineClamp
webkitLocale
webkitLogicalHeight
webkitLogicalWidth
webkitMarginAfter
webkitMarginAfterCollapse
webkitMarginBefore
webkitMarginBeforeCollapse
webkitMarginBottomCollapse
webkitMarginCollapse
webkitMarginEnd
webkitMarginStart
webkitMarginTopCollapse
webkitMask
webkitMaskBoxImage
webkitMaskBoxImageOutset
webkitMaskBoxImageRepeat
webkitMaskBoxImageSlice
webkitMaskBoxImageSource
webkitMaskBoxImageWidth
webkitMaskClip
webkitMaskComposite
webkitMaskImage
webkitMaskOrigin
webkitMaskPosition
webkitMaskPositionX
webkitMaskPositionY
webkitMaskRepeat
webkitMaskRepeatX
webkitMaskRepeatY
webkitMaskSize
webkitMaxLogicalHeight
webkitMaxLogicalWidth
webkitMinLogicalHeight
webkitMinLogicalWidth
webkitPaddingAfter
webkitPaddingBefore
webkitPaddingEnd
webkitPaddingStart
webkitPerspectiveOriginX
webkitPerspectiveOriginY
webkitPrintColorAdjust
webkitRtlOrdering
webkitRubyPosition
webkitTapHighlightColor
webkitTextCombine
webkitTextDecorationsInEffect
webkitTextEmphasis
webkitTextEmphasisColor
webkitTextEmphasisPosition
webkitTextEmphasisStyle
webkitTextFillColor
webkitTextOrientation
webkitTextSecurity
webkitTextStroke
webkitTextStrokeColor
webkitTextStrokeWidth
webkitTransformOriginX
webkitTransformOriginY
webkitTransformOriginZ
webkitUserDrag
webkitUserModify
webkitUserSelect
webkitWritingMode
white-space
whiteSpace
widows
width
will-change
willChange
window-dragging
window-shadow
word-break
word-spacing
word-wrap
wordBreak
wordSpacing
wordWrap
writing-mode
writingMode
x
y
z-index
zIndex
zoom

HTML5 Ninja Techniques – Minimal HTML Markup Needed For Text

icompile.eladkarako.com_use_minimal_textSo we want to add some text, and style it,
but wrapping with span requires too much text adding: opening and closing tags + class="..." or HTML5’s data-*, this all so we can later “find” the node using CSS-Rules or JavaScript and style the hell-out of it :)


The idea is later to find the item, using CSS or JavaScript, in a very efficient way,
as fast as I know, I’m the first one ever implemented using this technique.. and in production (isn’t it the idea of every product eventually..?).

.. you have to think out of the box for this crazy trick to be seen reasonable to you.. (and there goes the 4’th wall..).

  1. you want a self-closing tag but one that will show you some text..
    # first attempt: <img alt=hello/>
    skipping the \" is permitted !!

    this works since the src is not specified, so the ALT kicks-in..
    but you’ll get the native border around which you should disable using border=0 attribute..
    but its MORE TEXT, so no-go

  2. that pesky border (CSS border is a different one) is there because we use W3C’s official ALT attribute, but we can do better,
    joining some CSS’s content and attr() and putting the text in one of the attributes.

    the HTML is:

    <img x=hello>

    and the CSS is:

    img{
      content:attr(x);
      font-size:30pt;
      color:darkblue;
      border:none;
    }

    but it won’t work, since the img tag’s text-content does not mean anything (unlike other tags, the img tag is actually just like rendering stuff with JavaScript new Image())

    lets change to something quite different either the :before or :after “area”, which technically uses same, still minimal self-closing tag of img, but just as a placeholder.

    ooopss… apparently you can only see the img :before if you’ll still place an ALT=".." non-empty attribute,

    hmmm.. so its not optimal since we’ve already adding quite a lot of text, and it is becoming a bit more complex than necessary.

  3. we can do better, using CSS we can cheat and use content="..." and attr()

    which is technically not in the HTML markup, and CSS are far more optimized than HTML, also, loaded parallel and optionally CPU-accelerated. so we’re good here..

    icompile.eladkarako.com_i_lv_minimal
    this was the result (works really well..)
    first is the html markup: <t x=hello> now the CSS markup which you can include in a separate CSS file

    /* minimal */
    t[x]:before{
        content:attr(x);
    }
    
    /* optional styling - very specific and easy to use */
    t[x=hello]:before{
      font-size:30pt;
    }
    
    /* optional styling - for all "minimal text tags" */
    t[x]:before{
        margin:4px 4px 4px 4px;
        padding:4px 4px 4px 4px;
        color:darkblue;
        background-color:lightgray;
        border:1px solid purple;
    }
    

    here is a little fun with http://jsfiddle.net/nra1jwjo/

  4. Fun!