An honest-to-goodness 80s-style coder mag with HTML web apps you type out and run locally. It’s $10. Go forth and code.
Hi, I’m Phil Nelson, a writer, developer, and audio-visual maker of stuff. I have been making stuff online for over 25 years. I run RetroStrange and Set Side B. Good to see you.
Blog Archives
Tag: css
-
A Deep Dive on Z-Index Usage
How do you make sure your annoying popup is shown on top of every other element in the page, when you don’t know how many there are, who wrote them, and how bad they wanted their elements to be on top? That’s when you set your z-index to 100, or maybe 999, or maybe, just maybe 99999 to be really sure yours will win.
That, at least, is how I write my CSS. In the rest of this post, we will look at millions of z indices to see what everyone else does.
Of course, if you make websites for a living you’ll find this interesting. Like most things available here.
-
CSS Sans
A font constructed entirely by CSS. It is, essentially, a programmatic realtime typeface. I love how it degrades for older versions of IE:
It’s not what I’d consider practical for production use. Still, CSS Sans is a hell of a demonstration of how far CSS has come since Microsoft shipped Internet Explorer 3 in 1996, which was first browser to implement some of the CSS1 spec (CSS v1 was not yet a W3C recommendation).
-
Layout Land: CSS Grid
Jen Simmons is doing a great job of introducing the core concepts of CSS Grid with this video series on Layout Land. These videos have been a huge help to me getting up to speed on the state of the tech. Highly recommended.
-
Stop using device breakpoints
Adam Silver with some good horse sense. This is a surprisingly common practice here in the Year of Luigi 2017. It’s mostly surprising because we spent so much time talking about this during the original web standards push that I’d hoped it had sunk in.
-
You Might Not Need JavaScript
>Examples of common UI elements and interactions with HTML and CSS alone.
**You Might Not Need JavaScript** is doing the lord’s work. Maybe we *don’t* need to replace everything with some flavor of Javascript, huh? Maybe?
-
No CSS
I’m turning off my stylesheets for the rest of 2014. And probably some of 2015. It’s an experiment. Plus it will force me to do a full redesign when the time comes.
We used to do this kind of stuff all the time before the internet got all serious and everyone started pretending to know what they were doing.
-
Big, Beautiful Dropcaps with CSS initial-letter
[Nice post from Dudley Storey on the new CSS proposal for initial-letter][link]. CSS typography has come a long way in the previous 5 years but we’re still in the woods with a lot of the things that print media take for granted.
[link]: http://demosthenes.info/blog/961/Big-Beautiful-DropCaps-with-CSS-initial-letter “demosthenes.info – Big, Beautiful Dropcaps with CSS initial-letter”
-
CSS Performance metrics from the creator of Bootstrap
[A reasonable, if unscientific, look at the performance of various common CSS methods][link], comparing things like Attribute .vs. Class-based selectors, box-sizing resets, floats .vs. flexbox .vs. inline-block, and a lot more.
Love that someone took the time to do this so I don’t have to.
[link]: https://github.com/mdo/css-perf “mdo/css-perf”
-
Float Labels with CSS
[Slick technique that is worth looking into for many applications.][link] As someone who deals with a lot of form inputs both as a user and a designer, there are some useful ideas here.
[link]: http://css-tricks.com/float-labels-css/ “Float Labels with CSS | CSS-Tricks”
