search

petrosh / snippetrosh

Notes with Issues
MIT License
1 stars 3 forks source link

HTML #8

Open petrosh opened 8 years ago

petrosh commented 8 years ago
  1. New Doctype
  2. The Figure Element
  3. No More Types for Scripts and Links
  4. Flexibility with “Quotation marks”
  5. Content Editable
  6. Mark Element
  7. Audio Support
  8. Video Support
  9. Local Storage
  10. [input] Email type
  11. [input] Placeholders Attribute
  12. [input] Required Attribute
  13. [input] Autofocus Attribute
  14. [input] Autofocus Attribute
petrosh commented 7 years ago

Dialogs

<figure id="dialog-box" class="warning">
    <figcaption>Message Title</figcaption>
    <p>Message text</p>
</figure>
petrosh commented 7 years ago

Script loading

Links

Use defer

Putting scripts at the end of the body (you can but) strip metadata from the head (where they belong) to the body.

<script src="script.js" defer></script>
petrosh commented 7 years ago

Input

Enter file path with forced extension

<input type='text' autocomplete='off' name='$id' pattern='(.*)(\.yml)$'>

Attributes MDN

form attribute

The id of a <form> element in the same document. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements.

<form id="form-id">
  ...
</form>
<input type="text" form="form-id">

Select

Default blank option

<option hidden disabled selected value></option>

optgroup

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

schermata 2018-02-13 alle 22 16 52

Dates

<input type=date step=7 min=2014-09-08> - Monday only
<input type=time min=9:00 max=17:00 step=900> - 15m increments
<input type=week step=2 min=2014-W30> - odd week

Progress

<progress max="100" value="75">75/100</progress>

schermata 2018-02-13 alle 19 01 36

Meter

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
Value Render
75 schermata 2018-02-13 alle 19 06 42
60 schermata 2018-02-13 alle 19 07 44
30 schermata 2018-02-13 alle 19 08 49

schermata 2018-03-07 alle 13 28 52

petrosh commented 7 years ago

Meta tags

<meta charset="utf-8">
<title>What Meta Tags Your Site Should be Using | Aaron Krauss</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimal-ui">
<meta name="description" content="Whenever you’re building a new site, you probably pay...">

<!-- Open Graph -->
<meta property="og:title" content="What Meta Tags Your Site Should be Using | Aaron Krauss">
<meta property="og:description" content="Whenever you’re building a new site, you probably pay...">
<meta property="og:image" content="https://thesocietea.org/wp-content/uploads/2016/12/what-meta-tags.jpg">
<meta property="og:url" content="https://thesocietea.org/2016/12/what-meta-tags-your-site-should-be-using/">
<meta property="og:type" content="website">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@thecodeboss">
<meta name="twitter:creator" content="@thecodeboss">

Other example

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Coronavirus country comparator</title>

  <link rel="shortcut icon" href="favicon.ico">

  <link href="css/roboto.css" rel="stylesheet">
  <link href="css/vuetify.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <meta property="og:title" content="Coronavirus country comparator" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://boogheta.github.io/coronavirus-countries/" />
  <meta property="og:image" content="https://boogheta.github.io/coronavirus-countries/img/screenshotv2.png"/>
  <meta property="og:description" content="Compare the spread of the COVID-19 coronavirus in all countries by numbers of confirmed, recovered and deceased ones as reported by JHU CSSE and different countries"/>

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@boogheta">
  <meta name="twitter:creator" content="@boogheta">
  <meta name="twitter:title" content="Coronavirus country comparator">
  <meta name="twitter:description" content="Compare the spread of the COVID-19 coronavirus in all countries by numbers of confirmed, recovered and deceased ones as reported by JHU CSSE and different countries">
  <meta name="twitter:image" content="https://boogheta.github.io/coronavirus-countries/img/screenshotv2.png">
 </head>
 <body>
  <noscript><strong>Coronavirus country comparator requires JavaScript. Please enable it to continue.</strong></noscript>
petrosh commented 7 years ago

SVG

External link symbol

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9" class="icon_svg-stroke" stroke="#666" stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

Grid

<img src="https://imgh.us/grid.svg" width="641" height="161"/>

Illustrator

Illustrator SVG option panel

SVG FLAGS

petrosh commented 7 years ago

Characters encode

hyphen -

minus &minus; −

A very close approximation of hyphen but set a little lower and shorter than a true hyphen.

en dash &ndash; –

The en dash is a slightly longer dash used to denote ranges or relations.

em dash &mdash; —

The em dash is usually one em wide and usually represents a change in thought.

hair space &#8202;  

&mdash; em-dash &ndash; en-dash &#8210; figure dash (using en-dash is mostly acceptabe). &#8209; non-breaking hyphen &emsp; one em of space &ensp; one en of space &nbsp; the much-misused nonbreaking space (use an en space for  &nbsp ktksbai) &thinsp; thin space (0.2-0.25em)

petrosh commented 7 years ago

Redirect

<head>
    <noscript>
        <meta http-equiv="refresh" 
            content="0;URL=https://www.alexkras.com/simple-guide-to-finding-a-javascript-memory-leak-in-node-
            js/amp/" 
        />
    </noscript>
    <title>https://www.alexkras.com/simple-guide-to-finding-a-javascript-memory-leak-in-node-js/amp/</title>
</head>
<script>
    window.opener = null;
    location
    .replace(`https:\/\/www.alexkras.com\/
        simple-guide-to-finding-a-javascript-memory-leak-in-node-js\/amp\/`)
</script>
petrosh commented 6 years ago

Responsible Social Share Links

<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fjonsuh.com%2F"
   target="_blank">Share on Facebook</a>
petrosh commented 6 years ago

Code

Make <pre> Text Wrap.

pre {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
petrosh commented 6 years ago

Images

Alternate image onerror

<img src='url.jpg' onerror='this.onerror=null;this.src="other-url.png";'>
trasparente commented 4 years ago

Sometimes is better:

<input type="text" inputmode="numeric" pattern="[0-9]*">

instead of:

<input type="number">

https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/