CSS

Responsive Web Design (RWD) / HTML5 / CSS3

Break words between any two letters:
word-wrap: break-word;

Responsive video: padding-bottom

position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;

Technique makes use of the unique way padding-top and padding-bottom deal with percentage values – they will be interpreted as a percent of the width of the containing element.

box-sizing


box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box

content-box
This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.

The width and height properties include the padding size, and do not include the border or margin.

border-box
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note: Padding & border will be inside of the box

The HTML

Element represents self-contained content, frequently with a caption (

)




		
	Caption for the picture

Ruby Notepad Bookmarklet :
RAW

Media Queries:
http://www.w3.org/TR/css3-mediaqueries




@media (orientation: portrait)  { }
@media screen and (color)  { }

Window.matchMedia()

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the view port is at least 400 pixels wide */
} else {
  /* the view port is less than 400 pixels wide */
}

The following example inserts the URL in parenthesis after each link:

a:after {
    content: " (" attr(href) ")";
}

Columns

Divide the text in a

element into three columns, and specify a 40 pixels gap between the columns.

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;

-webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 4px outset #ff00ff; /* Firefox */
    column-rule: 4px outset #ff00ff;
}

Css Validator:
http://jigsaw.w3.org/css-validator


@charset "UTF-8"; /* you need this line as first line */
@import url(css-file-1.css);
@import url(css-file-2.css);
@import url(css-file-3.css);


#cookie-consent-container button {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAABu0lEQVR4nGMUExNjgAE3J1trc2NLMyO4yPFT546ePLtr32G4CCNEAw83V09LpZKCPAM2cO/Bw5Ka9i9fv0E18HBzLZ7Vx83FhVU1BHz99i02rejL129MDAwMPS2V+FUzMDBwc3H1tFQyMDAwB/p6eLs7QURv3bl/7NR5BgYGESFBBgaG+w+fLFu7+d27DypK8gwMDIICAi9fv2Fxd7KFG3Pzzv11m3cJCwtkJEaws7E3dU35++8fsj3uTrYsutoacL6aiqKwsMDLV287Jszm4uT88/cvCzOzl4s9XIGutgYTsgHqKooZiRHs7Gw/f/56/+GjoAB/U1W+orwMshoUDQwMDP/+/mdhZoawv33//vPXTzQFKBoeP30+c8HK799/cHNxQuyZMX/FzTv3kdUwW1uYiIuJQDhFNe2fv3wVFRbKTY2xtTK+cfve69fvrty4baCrxcPNxcDAcPnqDaadyNHOyMjKylKQGa+moqiiqJAaFy4oyP/5y9ffv39DFOzcd5hRTExsRn8zrkTx4tWb379/S4iJsLKy3nvwMKOwlqyk8eXrt9i0onsPHuJSfe/BQ4hqBnhqhQBikjcAag20dJxdteYAAAAASUVORK5CYII=) no-repeat;
        position: absolute;
        width: 16px;
        height: 16px;
        top: 12px;
        right: 12px;
        border: 0;
        text-indent: -9999px;
    }