Passa al contingut principal

Creeps and Weirdos in the CSS Spec



When I look at new modules in the CSS spec, it makes me feel like singing the chorus from a popular Radiohead song from the ’90s:



But I’m a creep.

I’m a weirdo.

I don’t belong here.



If web standards could talk, I think a lot of them would be humming that regularly.


But hey, let’s be fair and not leave “weirdos” out of CSS3 discussions. So in this post, I’ll run through a bunch of things from the CSS specifications that you might not have heard of yet. None of this is even close to ready to use (unless it degrades really gracefully), but it will serve to get you familiar with some of the rounded corners and drop shadows of the future.


toggle() Values


According to the spec, the toggle() expression (formerly called cycle()) “allows descendant elements to cycle over a list of values instead of inheriting the same value.”


That’s probably not the most clear explanation, so I’ll try to make it easier to understand. The example I like in the spec is the one applied to unordered lists:



ul {
list-style-type: disc;
}

ul ul {
list-style-type: toggle(disc, circle, square, box);
}

With this code, the parent list will use “disc” while nested lists will cycle through “circle”, “square”, and “box”, respectively. So a list that is four levels deep will use “box”, and a 5th-level nested list will start back at the beginning of the cycle, using “disc”.


Variables (finally)


CSS variables have been talked about for a long time. Of course, if you’re preprocessing, then you couldn’t care less about this in the spec, because preprocessors add this feature out-of-the-box. But now the spec has what seems to be a more definite future mapped out for CSS variables.


Here’s some simple syntax to show you how they work:



:root {
var-global-color: navajowhite;
}

.element {
color: $global-color;
font-family: var($global-font, 'Helvetica, sans-serif');
}

Custom variables are created using the “var-” prefix, then a custom name of your choosing. When you apply the variable to a property, you prefix it with the dollar sign (like in PHP). Alternatively, you have the option to use the var() expression/function. With var(), you’re able to provide a default value as a second argument, which will be used if the supplied variable (the first argument) is not defined.


So in the example above, the font stack would be “Helvetica, sans-serif” because $global-font is not defined. But the color of the text (represented by $global-color) will be navajowhite (yes, that’s a valid color name), because we’ve defined it on the :root element.


Box Alignment Module


The Box Alignment Module is an attempt to separate simpler alignment issues into a universal set of features that will be available in all other layout modules (flexbox, grid layout, etc).


According to the description, it “attempts to create a cohesive and common box alignment model to share among all of CSS” and defines six new properties, specifically:



  • justify-self

  • align-self

  • justify-content

  • align-content

  • justify-items

  • align-items


This new module attempts to address a couple of things:


First, these features allow for simple ways to align elements and content that mimic more powerful alignment features in other layout modules like flexbox. This means you can finally do something simple like vertically centering text in a block, without having to resort to all the code overhead of using something larger like flexbox.


Second, these new properties are intentionally generic so that they can be used across all layout modules, which is going to be a great benefit to learning the syntax for all the different layout modules.


I have to give credit and thanks to Tab Atkins for clarifying this particular module for me on IRC.


@viewport (Device Adaptation)


This one seems pretty exciting and looks to be a nice complement to media queries. From my brief look at the specification, it is intended as a replacement for the viewport meta tag.


Here’s an example from the spec:



@viewport {
width: device-width;
}

@media screen and (min-width: 400px) {
div { color: red; }
}

@media screen and (max-width: 400px) {
div { color: green; }
}

In the example above, we’re defining the viewport using the @viewport at-rule, then defining some media queries. So if the actual width of the device was 320px, and the size of the window was 960px, then the second media query would be the only one of the two to take effect.


If not for the @viewport rule, the reverse would happen — the first media query would apply but the second would not.


Line Grid Module


The Line Grid Module describes features “to align lines and blocks to invisible grids in the document.”


Some of the potential benefits of this module include improvements in readability through vertical rhythm, better multi-column layouts, improving the vertical rhythm of text before and after images, and enhancing paged media.


The spec also points out that this will help the vertical rhythm in East Asian layouts which require this more often than other scripts.


Compositing and Blending


The ability to combine elements with their backgrounds using various effects is nothing new to most web designers.


Some of the blending effects described in this module include:



  • multiply

  • screen

  • overlay

  • darken

  • lighten

  • color-dodge

  • color-burn

  • saturation

  • luminosity


Look familiar? The features introduced here are very similar to what you find in the layers panel in Photoshop, so when this module starts to get widespread browser support, it will be an easy thing for many designers to incorporate into their toolkit.


Conditional Rules with @supports and @document


This one looks super-cool, and again it looks to be in the very early stages and likely not even close to being ready for use. This module adds two new at-rules that can be used in a manner similar to how we use conditional classes or Modernizr’s helper classes.


For example, you can fork some CSS that will only be rendered if the browser supports a specific feature:



@supports ( display: flexbox ) {

.example {
background: blue;
border: solid 1px white;
}

}

Additionally, you can use the @document at-rule to apply CSS rules to certain pages, like this:



@document domain("impressivewebs.com") {

body {
font-size: 16px;
}

}

This targets the body element as long as it exists on a page on the specified domain. In addition to domain(), you can use url(), url-prefix(), and regexp().


Final Warning


As already mentioned, these features are absolutely not ready to use, and in most cases might not be ready for some time. I believe the only one above that has any browser support is CSS Variables, which works in WebKit Nightlies. Most of the modules mentioned above have numerous red “issue” boxes, demonstrating problems that are still being worked out in the syntax and how browsers should implement them.


Of course, if we could abolish old browsers, then these types of cutting-edge features would be much closer to being used fearlessly by more developers.


If you have any further info on the statuses of any of these modules or have any corrections to any of the above, please comment. If you want more summaries and code examples on new CSS3 features, check out my CSS3 Click Chart resource which has recently been updated to include some of the above and more.


Or you can browse the CSSWG’s dev channel folder for links to all sorts of “creeps” and “weirdos” in the spec.



Related posts:



  1. Little-Known CSS3 Typographic Features

  2. Should the Standard Property Be Omitted for Some CSS3 Features?

  3. Browser Support for CSS3: What’s the Current Status?










via Impressive Webs http://www.impressivewebs.com/creeps-weirdos-css-spec/

Comentaris

Entrades populars d'aquest blog

10 alternativas a Cuevana para ver películas online

10 alternativas a Cuevana para ver películas online : Durante este último tiempo, en Cuevana se sucedieron varios “problemas” por los cuales hubo que ajustar algunas cosas antes de tiempo (como el rediseño del sitio), que dejaron a algunos usuarios ciertos problemas para acceder a las películas o series del portal. Pero realmente esto es algo que no incumbe a los usuarios y, como sabemos, existen muchas otras alternativas a Cuevana dando vueltas por Internet, que intentaremos presentar aquí mismo. Los sitios que repasaremos funcionan del mismo modo que Cuevana, mediante la instalación de un plugin que permite visualizar los videos de Megaupload o WUShare, entre otros servicios, en una calidad de imágen realmente excelente. Tal como sucede con el más popular servicio, todos ellos tienen publicidad que en algunos casos resulta insoportable, pero como dice Federico en DotPod “a caballo regalado no se le miran los dientes”. Alternativas a Cuevana 1. Moviezet Posiblemente el mejor clon d...

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...

Más de 50 de las mejores herramientas online para profesores

No es una exageración afirmar que hay ciento de aplicaciones educativas por ahí por la red, para todos los gustos y de todos los colores, por lo que es difícil tratar de recogerlas todas en un listado. Sin embargo, algunas destacan más que otras por su innovación y por su capacidad para conseguir adeptos, y esas son las que protagonizan la presente recopilación. Son 50 interesantes herramientas online basadas en las recopilaciones de EduArea , las muchas ya tratadas en Wwwhat’s new y las destacadas por la experiencia. 1. Dropbox : Un disco duro virtual con varios GB gratuitos y al que se accede desde casi cualquier dispositivo. Sin embargo, es muchísimo más que eso, de hecho ya comentamos 20 razones . 2. Google Drive : La evolución de Google Docs que suma a sus múltiples herramientas de creación de documentos, un considerable espacio virtual gratuito. 3. CloudMagic : Una extensión y una app multidispositivo para buscar información simultáneamente en Gmail, Twitter, Facebook, Evernote ...