CSS4

**CSS4** is a hypotethical idea for a new version of the CSS(3) stylesheet language. Whenever the author gets an idea for something he believes should be a thing in CSS, he adds it here in his dream CSS language.

## **Single Line Comments**

Inspired by Less, Sass and just about every single Java/C-related language.

```
//Test
// This is a single line comment

/** And here's a "normal" comment! **/

body {
   font-family: "Verdana"; //Set the font family to Verdana
}

```

## **If [thing] logic**

```
//If exists

@condition if (".blah") exists {
    body {opacity: .96;}
}

@condition if ("#beeb_boop") and (".blah") exist { //Note the removal of the "s"
   body {line-height: 27px;}
}

@condition if ("#beeb_boop") or (".blah") exists { //Here we have an "s" again
  div[class="lol"] {box-shadow: 0 0 20px inset black;}
}

//If doesn't exist ' (has to be here to prevent CSS syntax from f***ing up)

@condition if (".blah") doesn't exist { //No "s" needed at all
  p {color: white;}
}

@condition if (".blah") and ("#beeb_boop") don't exist {
 button {top: -4px;}
}

//If element has style

@condition if (".blah") has style["background-image: url('gg no re.jpg');"] {
 #bah {display: none;}
}

@condition if (".blah") has style["background-image: url('gg no re.jpg'); padding: 6px;"] {
 #bah {right: 30px;}
}

//If element includes other element + else

@condition if (".woof-woof") in ("#oink") {
  #oink {background-color: darkslategray;}
} !else {background-color: teal;} //!else works for every @condition

//If browser

@condition if browser(°°Chrome) {
    //css
    //ye im getting lazy now
}

/** Possible values (Samsung = Samsung Internet for Android, Green = GreenBrowser) **/
//°°Chrome
//°°Opera
//°°Konqueror
//°°Safari
//°°Samsung
//°°Puffin
//°°Firefox
//°°Edge
//°°IE
//°°Falkon
//°°OtherQt
//°°Waterfox
//°°Yandex
//°°Green

```

## **More Browser Prefixes**

```
-sm- /** Samsung **/
-cmo- /** Puffin **/
-qt- /** Falkon and other browsers powered by the Qt WebEngine **/
-wt- /** Waterfox **/
-ydx- /** Yandex **/
-gb- /** GreenBrowser **/

```

## **Code Nesting (and mixins)**

Guess what, Sass and Less!

...Now to include mixins as well.

```
div[class="lol"] {
     font-family: "Open Sans";
     .meatball {text-shadow: 1px .5px 0 black;}
}

```

## **As much external support for @document as possible**

Sucks so hard how Firefox-only this is currently. :(

```
//Shamelessly copied from CSS-Tricks because programmers are lazy :p

@document
  /* Rules for a specific page */
  url(http://css-tricks.com/),

  /* Rules for pages with a URL that begin with... */
  url-prefix(http://css-tricks.com/snippets/),

  /* Rules for any page hosted on a domain */
  domain(css-tricks.com),

  /* Rules for all secure pages */
  regexp("https:.*")
{

  /* Start styling */
  body {font-family: Comic Sans;}

}

```

## **More Colour Values/Space Options**

```
.blah {
   background-color: cmyk(60, 14, 0, 47); //Teal blue
}

.mudada span {
  color: hsv(26°, 45%, 65%); //Café au lait
}

```

## **Scrollbars for as much as browsers as possible**

C'mon Firefox and Edge! Show Chrome, Safari, Opera and Internet Explorer what you're made of!

also yes your eyes are not deceiving you, custom scrollbars are legit possible in ie, see for yourself

```
::-moz-scrollbar, //Firefox
::-khtml-scrollbar, //KHTML (e.g. Konqueror)
^[brs="!!edge%scrollbar``"], //Intentionally weird/complex procedure (because why not) for Edge
§!scrollbar[b="\browser\"] { //Values: qt, cmo, ydx, gb, wt
   background-color: yellowgreen;
}

```

On a side note: update newer IE versions to include the IE scrollbar stuff that was present only in older versions.

## **More Keyframes**

```
@-ms-keyframes {} //Most obvious one
@-xv-keyframes {} //For certain Opera versions
@-khtml-keyframes {} //Doesn't just include Konqueror, also very old Safari and more
@-konq-keyframes {} //Other Konquerors
@-apple-keyframes {} //Other Safari
@mso-keyframes {} //REALLY old IE/Microsoft
@-qt-keyframes {}
@-cmo-keyframes {}
@-ydx-keyframes {}
@-gb-keyframes {}
@-wt-keyframes {}

```