net

(Brent) #1

CSS


Essentially think of it being along the lines of
Twitter’s Night Mode, but without you actually
switching the CSS (I see you).











Input colour’s picked value replaces the
document’s --color value, making the change without a
hitch. You can play with blend modes, alpha channel
colours or pngs – endless possibilities and fun.


Now with your future-proof CSS in place, which
doesn’t depend on any third-party developer and
uses only custom properties, there is a good chance
you are covered and ready to kick-start production.
But what if you want something other than
variables in your code, let’s say CSS modules? As
of today, for existing CSS features like modules or
nesting, you couldn’t spare the extra build step any
longer, but you can implement it with the sweet
promise of not having to rewrite code when vendors
catch up with the spec.
Instead of refactoring your CSS every time you
want to improve your output, you should write your
code in a specification aligned that way in the first
place. This is the main difference between pre- and
post-processors. A pre-processor actually writes
the CSS for you (basically, from a text file), while
a post-processor aligns your already valid CSS for
more browser support, the latter giving you more
flexibility in the process.
Using the native method always beats the
workaround, and having the working knowledge of
future technologies is the best position you can be in
when learning CSS.

Top Under 640px the media
query triggers, changing
the flex direction to column,
making the content vertical
instead of horizontal
Above You can build your
website around a base
theme and just switch it out
with the browser doing the
heavy lifting
Free download pdf