css

@mixin and other CSS @at-rules in Sass/SCSS

tomo — Tue, 27 Jun 2017 08:34:41 +0000

June 27, 2017

You've probably seen CSS rules which start with the at-sign such as @font-face for custom fonts or @media used for responsive styling based on screen size. Maybe you've even used @keyframes for CSS animations. These so-called at-rules can go around normal CSS rules (normally a rule would simply be one or more selectors followed by lines of rules within curly braces).

But the @-rules are rarely sprinkled throughout a stylesheet.

In preprocessed CSS like Sass, many new at-rules are possible. Here we're using Sass/SCSS.

What's SCSS? It's...

Web viewports for mobile responsive websites

tomo — Mon, 16 May 2016 00:39:00 +0000

May 16, 2016

mobile web responsive css

What is a viewport? You may have seen the meta-tag named "viewport" on newer mobile-friendly websites. The mobile (iOS) version of Safari introduced the "viewport meta tag" and "scale" on the viewport for mobile (scale optionally being one of the special values minimum-scale, maximum-scale, and user-scalable).

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

A viewport is like a logical window. You are on one side of the window looking through to the...

Learn CSS by playing with resources at hand: Chrome Developer Tools

tomo — Wed, 02 Mar 2016 16:54:00 +0000

March 2, 2016

css chrome

CSS is all around us. It's the invisible language that dictates how every web page, including the one you're reading now, looks - from color to size and shape, layouts and positions of each piece, all that we call "style". CSS stands for Cascading Style Sheets, a stylesheet simply being the text file containing the CSS definitions. You can take a look at a stylesheet now by right-clicking somewhere in a web page and selecting "Inspect" in Chrome or "Inspect element" in Safari. But you should use Chrome for this exercise.

...

CSS is not Turing Complete

tomo — Mon, 30 Nov 2015 15:05:15 +0000

November 30, 2015

turing css brython

As more and more abilities are shoved into CSS (or into various preprocessors of CSS like Sass/SCSS | Less) you wonder how far CSS3 is from being its own programming language. The answer is: it's still not a programming language. And in fact it's not even a really crappy one, as it is not shown to itself be Turing complete. (Except for some variants of Internet Explorer which allow you to use expressions as CSS values, but this is not supported and highly recommended against for performance reasons.)

You may recall from theoretical computer science classes that Alan Turing (you may...