Mes liens
796 shaares
12 results
tagged
CssTricks
Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript.
Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids
I'm sure we all agree that responsive web design has been one of the biggest subjects in the last few years and will continue with the growth of mobile. As a senior front and backend developer with a strong interest in research and development at my company, I am responsible to evaluate techniques like RWD. Whenever I received a link to a totally new CSS grid system, I became more and more skeptical. They did not feel "right" to me, but I wasn't sure why.
Then I happened to come across a great article by Ian Yates titled "Life Beyond 960px: Designing for Large Screens" which introduced me to the term "Screen Real Estate". Prior to that, I did some deeper research using rem units in CSS which was a fortunate coincidence. Suddenly I knew what felt wrong.
When talking about RWD we mostly talk about devices below the target width of our layouts. But what about larger screens? Most of you will agree that a non RWD website with a target width of 960px looks a bit odd or lost on such a screen. Things are becoming more obvious when we talk about people accessing our websites with a 60" TV. Sure, these TV sets will most likely still only have full HD resolution. But keep in mind that whoever sits in front of them is probably at least 4m/10f away from the screen.
Then I happened to come across a great article by Ian Yates titled "Life Beyond 960px: Designing for Large Screens" which introduced me to the term "Screen Real Estate". Prior to that, I did some deeper research using rem units in CSS which was a fortunate coincidence. Suddenly I knew what felt wrong.
When talking about RWD we mostly talk about devices below the target width of our layouts. But what about larger screens? Most of you will agree that a non RWD website with a target width of 960px looks a bit odd or lost on such a screen. Things are becoming more obvious when we talk about people accessing our websites with a 60" TV. Sure, these TV sets will most likely still only have full HD resolution. But keep in mind that whoever sits in front of them is probably at least 4m/10f away from the screen.
I'm pretty happy with CSS. I know it's common to complain about CSS and how it was never meant to build web pages like we do now and it's ill-suited to many tasks and yadda yadda. But I dunno. I work with it every single day and I feel like it's getting the job done pretty well. Maybe I don't have those fancy big thinker thoughts that can foresee alternate universes where more perfect languages exist. Or something.
In any app that has user avatars, users should be able to change those avatars. Anything to make that easier is desirable. Many apps start with a user's Twitter avatar, Facebook avatar, or Gravatar. That's a smart move. Avatars give users a sense of ownership over a virtual space so any way to get them to have their desired avatar is good for engagement.
Let's create a page where a user can update their avatar with as little friction as possible: they just drop an image anywhere on the page and it's done.
Let's create a page where a user can update their avatar with as little friction as possible: they just drop an image anywhere on the page and it's done.
Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best.
1. You want the icon to enhance a word
2. You want the icon to stand alone but still be functional or informational
And our major goals here are:
1. As good of semantics as we can get
2. As little awkwardness for screen readers as possible
This ground has been treaded before, but I think the following techniques are a small step forward.
1. You want the icon to enhance a word
2. You want the icon to stand alone but still be functional or informational
And our major goals here are:
1. As good of semantics as we can get
2. As little awkwardness for screen readers as possible
This ground has been treaded before, but I think the following techniques are a small step forward.
Just so everyone is clear on this: "Flexbox" (more specifically: CSS Flexible Box Layout Module) has undergone a lot of changes in the last three years. Changes both to the spec and what browsers have implemented.
As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, indentation, overall file structure... it all makes up a complete CSS style guide.
There is now an "organization" on GitHub for CSS-Tricks. This is a great feature of GitHub and a perfect fit for us.
Hey there folks! Today we’re going to take a look at spicing up our web banners, ads or any content for that matter, with CSS3 animations.
“What are the signs that the CSS is sub-optional, or that the developer hasn’t done a good job? What do you look for in CSS to determine how good or bad it is?”
The idea of the original was to abandon the grid layout of the table and make each cell it's own line. Each of those lines is labeled with a pseudo element. This creates a much taller table, requiring more vertical scrolling, but does not require horizontal scrolling. It's easier to browse the data without losing context of what's what. The downside is that you might lose the context of data comparison, since you no longer see see cells of data right next to other cells of that type.