css Archives - Page 9 of 17

16Aug

By phpInfoNo Comments

CSS Tricks

Task management has never been easier

(This is a sponsored post.)monday.com is a team management tool that is exceptionally suitable for any industry sector and by any sized team. It will perfectly serve a team of two or a team of hundreds spread around the globe, and it can manage multiple projects at once. monday.com promotes effortless collaboration and transparency, it's "cheetah fast," it displays status in as many as 20 different colors, and its status board can be customized to fit your needs and your workflow. It serves as an excellent alternative to having to force fit your work to meet the demands of your project management tools or systems. Direct Link to Article — PermalinkThe post Task management has never been easier appeared first on CSS-Tricks. Source: CSS-tricks.com

15Aug

By phpInfoNo Comments

CSS Tricks

Understanding why Semantic HTML is important, as told by TypeScript

What a great technological analogy by Mandy Michael. A reminder that TypeScript... makes use of static typing so, for example, you can give your variables a type when you write your code and then TypeScript checks the types at compile time and will throw an error if the variable is given a value of a different type. In other words, you have a variable age that you declare to be a number, the value for age has to stay a number otherwise TypeScript will yell at you. That type checking is a valuable thing that helps thwart bugs and keep code robust. This is the same with HTML. If you use the <div> everywhere, you aren’t making the most of language. Because of this it’s important that you actively choose what the right element is and don’t just use the default <div>. And hey, i...

15Aug

By phpInfoNo Comments

CSS Tricks

Creating the “Perfect” CSS System

My pal Lindsay Grizzard wrote about creating a CSS system that works across an organization and all of the things to keep in mind when starting a new project: Getting other developers and designers to use the standardized rules is essential. When starting a project, get developers onboard with your CSS, JS and even HTML conventions from the start. Meet early and often to discuss every library, framework, mental model, and gem you are interested in using and take feedback seriously. Simply put, if they absolutely hate BEM and refuse to write it, don’t use BEM. You can explore working around this with linters, but forcing people to use a naming convention they hate isn’t going to make your job any easier. Hopefully, you will be able to convince them why the extra underscores are useful, but...

15Aug

By phpInfoNo Comments

CSS Tricks

Practical CSS Scroll Snapping

CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It’s great for building interactions like this one: Browser support and basic usage Browser support for CSS scroll snapping has improved significantly since it was introduced in 2016, with Google Chrome (69+), Firefox, Edge, and Safari all supporting some version of it. This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Desktop Chrome Opera Firefox IE Edge Safari 69 No 63 11* 18* 11 Mobile / Tablet iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox 11.0-11.2 No No No N...

14Aug

By phpInfoNo Comments

CSS Tricks

The possibilities of the color-adjust property

The Open Web continues to show up in places we would have never originally expected to find it: our phones, televisions, watches, books, video game consoles, fast food menus, gas pumps, elevators, cars—even our refrigerators. By not making too many or too strict assumptions about how the web should be used, it remains flexible and adaptable. These qualities have allowed it to outperform closed technologies like Flash and Silverlight. With the web’s growth comes new features to better accommodate its new form factors and use cases. One feature I’m excited about is the color-adjust property, proposed in CSS Color Module Level 4. It is an acknowledgement that the web will continue to show up on devices that have less-than-stellar displays. There are two values for color-adj...

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

13Aug

By Ana TudorNo Comments

CSS Tricks

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single <circle> element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge. Plus, in 2018, we can accomplish a lot more with a lot less JavaScript! AI got the following result down to a single HTML element for the chart and very little JavaScript. The future should completely eliminate the need for any JavaScript, but more on that later. The final pie chart result. Some of you may remember Lea Verou's Missing Slice talk—my solution is based on her technique. This article dissects how it all works, showing what we can do in terms of graceful degradat...

Switch font color for different backgrounds with CSS

10Aug

By Facundo CorradiniNo Comments

CSS Tricks

Switch font color for different backgrounds with CSS

Ever get one of those, "I can do that with CSS!" moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while watching Dag-Inge Aas & Ida Aalen talk at CSSconf EU 2018. They are based in Norway, where WCAG accessibility is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting the font color based on the selected background color of the container. If the background is dark, then it would be ideal to have a white text to keep it WCAG contrast compliant. But what happens if a light background color is selected instead? The text is both illegible and fails accessibility. They used an...

Five interesting ways to use Sanity.io for image art direction

9Aug

By Knut Melv rNo Comments

CSS Tricks

Five interesting ways to use Sanity.io for image art direction

When we saw Chris put up a list of cloud-hosted data-stores, we couldn't resist letting him know that we also had one of those, only ours is a fully featured CMS that come with a rich query language and an open source, real time, collaborative authoring tool that you can tailor to your specific needs using React. It's called Sanity.io. “Add us to your list!” we asked Chris. “No, your stuff is interesting, can’t you write about you,” he replied. “Maybe something that would be useful for people working with images.” Challenge accepted! Systems like Sanity wants to free your content from the specific page it happens to be sitting on, so that you can flow it through APIs. That way you can reuse your painstakingly crafted content anywhere you need it. So, what does this mean for images? Images...

New on Wufoo: Form Manager Beta, File Manager Beta, Entry Manager Beta

9Aug

By Chris CoyierNo Comments

CSS Tricks

New on Wufoo: Form Manager Beta, File Manager Beta, Entry Manager Beta

Wufoo really is firing on all cylinders lately! As you may know, I've been using Wufoo here on this site, and pretty much every other site I've ever made, to power the web forms for over a decade. That's a dang long time, which more than proves to me Wufoo is a form solution to trust. But also a product that improves! There is a new Form Manager, Entry Manager, and File Manager. Enable the beta stuff through the Account menu: The new Form Manager has a modern and clean look. You can tell this has been a massive cleanup and give them better place to iterate from: The Entry Manager is the biggest upgrade so far. You can view more entries at a time and navigate between entires much easier. I quite like how each entry takes you through kind of a ghosted version of the form itself, seeing exa...

Here’s how I recreated theory11’s login form — how would you do it?

8Aug

By Chris CoyierNo Comments

CSS Tricks

Here’s how I recreated theory11’s login form — how would you do it?

I ran across a super cool design for a login form over on the website theory11.com. Actually, the whole site and the products they make are incredibly well designed, there's just something about the clean and classy form that really got me. Plus, it just so happened that the CodePen Challenge that coming week was based on forms, so I took a few minutes and tried slapping it together. Fadeout vector pattern One of the things I thought was super classy was the way that vector wallpaper-eque pattern was not only there but faded out sort of radially. I didn't try to match the pattern exactly—I just grabbed one from the Assets Panel in CodePen and dropped it onto the <html> element as a SVG data URL background-image with a low fill-opacity. Then a radial gradient sits on top and creates ...

8Aug

By Chris CoyierNo Comments

CSS Tricks

Chrome 69

Chrome 69 is notable for us CSS developers: Conic gradients (i.e. background: conic-gradient(red, green, blue);): We've got lots of interesting articles about conic gradients here, and here's some use cases and a polyfill from Lea Verou. Logical box model properties: margin, padding, and border all get an upgrade for more use cases. Think of how we have margin-left now — the "left" part doesn't make much sense when we switch directions. Now, we'll have margin-inline-start for that. The full list is margin-{block,inline}-{start,end}, padding-{block,inline}-{start,end} and border-{block,inline}-{start,end}-{width,style,color}. Here's Rachel Andrew with Understanding Logical Properties And Values. Scroll snap points (i.e. scroll-snap-type: x mandatory;): What once required JavaScript interven...

Browser painting and considerations for web performance

8Aug

By Georgy MarchukNo Comments

CSS Tricks

Browser painting and considerations for web performance

The process of a web browser turning HTML, CSS, and JavaScript into a finished visual representation is quite complex and involves a good bit of magic. Here’s a simplified set of steps the browser goes through: Browser creates the DOM and CSSOM. Browser creates the render tree, where the DOM and styles from the CSSOM are taken into account (display: none elements are avoided). Browser computes the geometry of the layout and its elements based on the render tree. Browser paints pixel by pixel to create the visual representation we see on the screen. In this article, I'd like to focus on the last part: painting. All of those steps combined is a lot of work for a browser to do on load... and actually, not just on load, but any time the DOM (or CSSOM) is changed. That’s why many web develope...

7Aug

By Geoff GrahamNo Comments

CSS Tricks

Slow Websites

The web has grown bigger. Both in expansiveness and weight. Nick Heer's "The Bullshit Web": The average internet connection in the United States is about six times as fast as it was just ten years ago, but instead of making it faster to browse the same types of websites, we’re simply occupying that extra bandwidth with more stuff. Nick clearly explains what he means by bullshit, and one can see a connection to Brad Frost's similarly framed argument. Nick talks about how each incremental interaction is a choice and connects the cruft of the web to the rise and adoption of frameworks like AMP. Ethan Marcotte paints things in a different light by looking at business incentive: ...ultimately, the web’s performance problem is a problem of profitability. If we’re going to talk about bloated pag...

7Aug

By Chris CoyierNo Comments

CSS Tricks

Sticky, Smooth, Active Nav

Just like the title says! Here's a sidebar navigation bar that... Uses sticky positioning. It stays on the screen when it can, but won't overlap the header, footer, or ever make any of it's links inaccessible. Scrolls smoothly to the sections you click to. Activates the current nav based on scroll position (it's a single page thing). See the Pen Sticky, Smooth, Active Nav by Chris Coyier (@chriscoyier) on CodePen. Sticky It's easy to toss position: sticky; top: 0; on something. But for it to work, it's gotta be within a taller parent element. So, the unordered list (<ul>) within the navigation (<nav>) works great here. Thanks to the CSS grid layout, the <nav> is as tall as the <main> content area. However, note that that we also gotta position: -webkit-sticky; for...

6Aug

By Geoff GrahamNo Comments

CSS Tricks

Short note on the accessibility of styled form controls

Styling and accessibility are often at odds with each other. Scott O'Hara has this repo that shows how the two can work really well together in the context of form controls. The trade-offs between native and styled controls reminds me of Eric Bailey's case study on focus styles: A common misconception is that the focus style can only use the outline property. It’s worth noting that :focus is a selector like any other, meaning that it accepts the full range of CSS properties. I like to play with background color, underlining, and other techniques that don’t adjust the component’s current size, so as to not shift page layout when the selector is activated. The nice thing about Scott's repo is that it serves as a baseline that can be pulled into a project and customized from there. Sort of li...