html & css

[!NOTE|label:references:]

stylus

[!TIP|label:references:]

tricky

  • :not(a[class*="btn"]) == :is(a:not([class*="btn"])

    • i.e.:

using bas64 string for svg

  • original

  • using data:image/svg+xml;base64

    • generate bas64 encoded string

    • using bas64 string in css

system font stack

[!TIP|label:references:]

  • explain

    FONT
    DEVICE TARGETED

    -apple-system (San Francisco)

    iOS Safari, macOS Safari, macOS Firefox

    BlinkMacSystemFont (San Francisco)

    macOS Chrome

    Segoe UI

    Windows

    Roboto

    Android, Chrome OS

    Oxygen / Oxygen-Sans

    KDE

    Fira Sans

    Firefox OS

    Droid Sans

    Older versions of Android

    Ubuntu

    Ubuntu

    Cantarell

    GNOME

    Helvetica Neue

    macOS versions < 10.11

    Arial

    Any

    sans-serif

    Any

  • comparison between the font stacks used by sites

    WORDPRESS
    MEDIUM
    GHOST
    GITHUB

    -apple-system

    -apple-system

    -apple-system

    -apple-system

    BlinkMacSystemFont

    BlinkMacSystemFont

    BlinkMacSystemFont

    BlinkMacSystemFont

    "Segoe UI"

    "Segoe UI"

    "Segoe UI"

    "Segoe UI"

    Roboto

    Roboto

    Roboto

    Roboto

    Oxygen-Sans

    Oxygen

    Oxygen

    Helvetica

    Ubuntu

    Ubuntu

    Ubuntu

    Arial

    Cantarell

    Cantarell

    Cantarell

    sans-serif

    "Helvetica Neue"

    Open Sans

    "Fira Sans"

    sans-serif

    Helvetica Neue"

    "Droid Sans"

    sans-serif

    "Helvetica Neue"

    sans-serif

bootstrap

references:

using boostrap sytles

[!NOTE|style:callout]

  • 4.x

  • 5.x

alert

references:

bootstrap alert

  • bootstrap alert 4.xalert css

    • template

  • bootstrap alert 5.x

    alert css

    • template

  • bootstrap 5.x :root

    bootstrap 5.x root colors

  • warning

    • 5.x

      warning alert 5.x

      • original

    • 4.x

      warning alert 4.x
      warning alert 4.x with 5.x color

      • original

  • success

    • 5.x

      success alert 5.x

      • original

    • 4.x

      success alert 4.x
      success alert 4.x with 5.x color

    • original

  • danger

    • 5.x

      danger alert 5.x

      • original

    • 4.x

      danger alert 4.x
      danger alert 4.x with 5.x color

      • original

  • primary

    • 5.x

      primary alert 5.x

      • original

    • 4.x

      primary alert 4.x
      primary alert 4.x with 5.x color

      • original

  • info

    • 5.x

      info alert 5.x

      • original

    • 4.x

      info alert 4.x
      info alert 4.x with 5.x color

      • original

callout

references:

  • callout

    callout css

  • default

    • original

  • primary

    • original

  • warning

    • original

  • danger

    • original

  • succeed

    • original

  • info

    • original

kbd

references:

border

[!NOTE|label:references:]

padding

border-style

font

references:

selector

[!TIP|references:references] references:

attribute selectors

  • [attr] : Represents elements with an attribute name of attr.

  • [attr=value] : Represents elements with an attribute name of attr whose value is exactly value.

  • [attr~=value] : Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

  • [attr|=value] : Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.

  • [attr^=value] : Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

  • [attr$=value] : Represents elements with an attribute name of attr whose value is suffixed (followed) by value.

  • [attr*=value] : Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

  • example

  • another example

    • sample code

    • elegant way

debug tooltips in inspect

[!NOTE|label:references:]

  1. select the element in the inspector

  2. select Event-Liseners tab in right panel

  3. delete the mouseover event

  4. re-hover the element in web page

debug tooltips

debug Popover in github

[!NOTE|label:references:]

  1. ⌥ + ⌘ + i to open the DevTools

  2. go to Console tab

  3. paste and execute following javascript code

popover debug

references

SELECTOR
EXAMPLE
EXAMPLE DESCRIPTION

.class

.intro

Selects all elements with class="intro"

.class1.class2

.name1.name2

Selects all elements with both name1 and name2 set within its class attribute

.class1 .class2

.name1 .name2

Selects all elements with name2 that is a descendant of an element with name1

#id

#firstname

Selects the element with id="firstname"

*

*

Selects all elements

element

p

Selects all <p> elements

element.class

p.intro

Selects all <p> elements with class="intro"

element,element

div, p

Selects all <div> elements and all <p> elements

element element

div p

Selects all <p> elements inside <div> elements

element>element

div > p

Selects all <p> elements where the parent is a <div> element

element+element

div + p

Selects the first <p> element that is placed immediately after <div> elements

element1~element2

p ~ ul

Selects every <ul> element that is preceded by a <p> element

[attribute]

[target]

Selects all elements with a target attribute

[attribute=value]

[target=_blank]

Selects all elements with target="_blank"

[attribute~=value]

[title~=flower]

Selects all elements with a title attribute containing the word "flower"

[attribute∣=value]

[lang∣=en]

Selects all elements with a lang attribute value equal to "en" or starting with "en-"

[attribute^=value]

a[href^="https"]

Selects every <a> element whose href attribute value begins with "https"

[attribute$=value]

a[href$=".pdf"]

Selects every <a> element whose href attribute value ends with ".pdf"

[attribute*=value]

a[href*="w3schools"]

Selects every <a> element whose href attribute value contains the substring "w3schools"

:active

a:active

Selects the active link

::after

p::after

Insert something after the content of each <p> element

::before

p::before

Insert something before the content of each <p> element

:checked

input:checked

Selects every checked <input> element

:default

input:default

Selects the default <input> element

:disabled

input:disabled

Selects every disabled <input> element

:empty

p:empty

Selects every <p> element that has no children (including text nodes)

:enabled

input:enabled

Selects every enabled <input> element

:first-child

p:first-child

Selects every <p> element that is the first child of its parent

::first-letter

p::first-letter

Selects the first letter of every <p> element

::first-line

p::first-line

Selects the first line of every <p> element

:first-of-type

p:first-of-type

Selects every <p> element that is the first <p> element of its parent

:focus

input:focus

Selects the input element which has focus

:fullscreen

:fullscreen

Selects the element that is in full-screen mode

:hover

a:hover

Selects links on mouse over

:in-range

input:in-range

Selects input elements with a value within a specified range

:indeterminate

input:indeterminate

Selects input elements that are in an indeterminate state

:invalid

input:invalid

Selects all input elements with an invalid value

:lang(language)

p:lang(it)

Selects every <p> element with a lang attribute equal to "it" (Italian)

:last-child

p:last-child

Selects every <p> element that is the last child of its parent

:last-of-type

p:last-of-type

Selects every <p> element that is the last <p> element of its parent

:link

a:link

Selects all unvisited links

::marker

::marker

Selects the markers of list items

:not(selector)

:not(p)

Selects every element that is not a <p> element

:nth-child(n)

p:nth-child(2)

Selects every <p> element that is the second child of its parent

:nth-last-child(n)

p:nth-last-child(2)

Selects every <p> element that is the second child of its parent, counting from the last child

:nth-last-of-type(n)

p:nth-last-of-type(2)

Selects every <p> element that is the second <p> element of its parent, counting from the last child

:nth-of-type(n)

p:nth-of-type(2)

Selects every <p> element that is the second <p> element of its parent

:only-of-type

p:only-of-type

Selects every <p> element that is the only <p> element of its parent

:only-child

p:only-child

Selects every <p> element that is the only child of its parent

:optional

input:optional

Selects input elements with no "required" attribute

:out-of-range

input:out-of-range

Selects input elements with a value outside a specified range

::placeholder

input::placeholder

Selects input elements with the "placeholder" attribute specified

:read-only

input:read-only

Selects input elements with the "readonly" attribute specified

:read-write

input:read-write

Selects input elements with the "readonly" attribute NOT specified

:required

input:required

Selects input elements with the "required" attribute specified

:root

:root

Selects the document's root element

::selection

::selection

Selects the portion of an element that is selected by a user

:target

#news:target

Selects the current active #news element (clicked on a URL containing that anchor name)

PreviousfontsNextJira & Confluence

Last updated

Was this helpful?