Contents tagged “CSS”
There are 47 contents with this tag:
-
4329 is a long discussion about how people are really, really, REALLY unhappy how on mobile the viewport units don't represent the size of the viewport — @fantasai https://github.com/w3c/csswg-drafts/issues/4329#issuecomment-814281379
😅
6 years later, this is still my most read article…
-
When I import my Google Analytics data in #CanIUse, it says only 80 % of my visitors have support for CSS
clamp()
, while it's 90 % globally. 🤔I have almost only tech-savvy visitors, so I don't understand. 🤷♂️
-
I learned a lot with this detailed article about z-index!
-
A new nice responsive layout trick built upon Heydon Pickering's Flexbox Holy Albatross.
-
Is there some sort of
shape-outside: self;
in CSS, to use an image as it's own shape? 🤔I couldn't find it in any docs, but it would be really useful to not declare the same URL twice.
-
So there it is, 5 different variations of fully accessible, CSS only mobile menu.
-
Adjust font size with CSS custom properties
I do love beautiful Web fonts, even if there are none on this site currently, so I plan to add at least one soon. I might use this nice solution.
-
HTML and CSS techniques to reduce your JavaScript
relying on solutions provided natively by browsers enables you to benefit at low cost from the expertise of the community creating web standards. These solutions generally have the advantage of using less code, thus reducing maintenance efforts for a development team (for example, no need to update the libraries used).
-
I'm a developer, not a graphic designer, so I genuinely wonder if CSS Grid and Flexbox automated layout and space management would be better for the flexible Web than such rigid artificial grids. I'm really wondering.
Responsive Grid Design: Ultimate Guide
This article highlights the most important aspect of the responsive grid and how product designers can adapt grids in their design workflow. medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892 -
Get a list of local URL links from a root URL. Works with JavaScript generated content. Can also act as a live-DOM CSS search across multiple files (find all the templates that are using the CSS selector I want to change).
-
Wonder if #EveryLayout's sidebar could be used for a media component where the image is on top by default, and on the right when there's enough space.
Looks like it's either 1st element on the left or 2nd element on the right… 🤔
-
Always remember that although a subset of the JavaScript community can be very loud, they represent a paltry portion of the web as a whole. This means that when they say something like “CSS sucks”—what they mean is “CSS sucks for a small subset of less than 1 percent of the web”
-
Full-Bleed Layout Using CSS Grid
Josh shows here beautifully[1] how to use CSS Grid to contain page elements' width and have some expand outside this containment.
-
Breaking out with CSS Grid explained
Here is a detailed explanation of Tyler Stika's Breaking Out With CSS Grid Layout article I shared previously.
-
Breaking Out With CSS Grid Layout
Now that CSS Grid support in browsers is great, I will start using this nice layout presented by Tyler more than 3 years ago.
-
Intrinsically Responsive CSS Grid with minmax() and min()
I've been using a CSS Grid layout on some pages here for a while, and had issues with some of it triggering an horizontal scroll on thin viewports bellow 320 pixels.
-
Enhancing User Experience With CSS Animations
Another amazing resource from Stéphanie, a detailed transcript of a talk she gave for Shift Remote.
-
Style Stage and old people of the web
Let’s not get too hung up about the past and how much great and good we did back then. And let’s fight that first urge to be snarky and feel a “oh god, not again” in our heads as that is our baggage and not the one of the web community. We’ve dropped the ball somewhere along the line talking exclusively to a receptive audience instead of moving on with our advocacy into academia, enterprise and education.
-
Inclusively Hiding & Styling Checkboxes and Radio Buttons
Sara shows us how to properly use SVG and CSS to design beautiful, engaging and accessible checkboxes and radio button in her new very detailed article, a must read.
-
I remember seing a clever design years ago that had this effect on scroll, but it was just for a logo, with a single image.
-
I know some utility classes can be useful, and #Tailwind helps some devs create pages without (really) knowing #CSS, but is it enough to justify this logorrhea in our HTML?
-
Keir Watson
Responsive Grid Magazine Layout in Just 20 Lines of CSS
Interesting dive into some of CSS Grid subtleties, to build a nice magazine layout.
-
Deep dive CSS: font metrics, line-height and vertical-align
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
-
The CSS Cascade, or how browsers resolve competing CSS styles
This is a great explanation/illustration of the CSS Cascade! 👍
-
If you don't understand why CSS is one of the great strengths of the Web, even if you've been using it for a while, you really have to spend these 15 minutes to watch Miriam Suzanne explain how it came to be, and why it is what it is.
-
Rémy and a few others launched an awesome resource for people who plan to struggle with rich email using HTML and CSS, which are not well supported in most email clients.
-
Cassie Evans shares the multiple steps involved in the creation of the lovely animated logo of her personal website:
-
Chen Hui Jing helps fix a little issue with overflowing Flexbox containers:
-
Andy Bell and
Heydon Pickering
Every Layout: Relearn CSS layout
Andy and Heydon teach us CSS layout with modern standards, what they call "algorithmic layout design":
-
Functional CSS (sometimes referred to as atomic CSS) is the practice of using small, immutable and explicitly named utility classes to construct components.
-
Front-end Developer Handbook 2019
If you want to grok the great diversity of topics and technologies involved in Front-end Web development, here is probably the most comprehensive source you can find nowadays.
-
Implementing a Mockup: CSS Layout Step by Step
If you don't know yet how to do Web layout with CSS, or feel like struggling with it, this great (baby) step by step tutorial will help you a lot:
-
Fading out siblings on hover in CSS
Trys here shows a nice little CSS trick to make hovered elements pop out (quite easy), while diming the siblings (that's the trick). Well done!
-
Yuan Chuan creates art from everything available in CSS, created < css-doodle /> (a web component for drawing patterns with CSS), and gave a talk at the 5th CSS Conference in Shenzhen on March 30, 2019.
-
Sophisticated Partitioning with CSS Grid
Tinnitus Tracker is the live music diary of Rob Weychert, listing more than 300 shows he's attended. Events lists can be really boring to scroll through, unless you're fond of CSS and want to experiment with Grid Layout and Quantity Queries.
-
The Flexbox Holy Albatross Reincarnated
when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. But you might like to avoid the intermediary part where you get a pair of elements on one line followed by a longer element underneath.
-
CSS Indexes: A listing of every term defined by CSS specs
This is a non-normative document. It lists every term defined in CSS, as long as it’s marked up correctly for the spec generator. It is intended as a reference document for authors, implementors, and spec authors, to aid in finding the definition for a term hidden somewhere in the haystack of CSS specs.
-
Viewport height is taller than the visible part of the document in some mobile browsers
When trying to use a 100vh CSS value to build a new interface for a game that would use the full viewport, I discovered that this full height value meant the bottom of the game interface was partialy hidden behind the browser buttons bar or below the "fold" of some mobile browsers.
-
There have already been some explorations on responsive SVG images a while back, but when Joe Harrison posted a responsive icon concept on Dribbble and even a working version on a dedicated website, a few people thought this was so wrong they had to make their own version. I must admit I'm one of them… 😉
-
OK, on le sait tous, « there is no page fold », mais savoir où est ce non fold peut être carrément utile, alors heureusement qu'il y a des outils qui permettent de visualiser simplement ce que donne un site sur les résolutions les plus courantes.
-
Les spammeurs s'y connaissent en CSS
Un p'tit malin qui se fait appeler Sylvain a laissé un commentaire très sympathique sur mon billet précédent. Mais il a aussi glissé subrepticement un lien vers un site de poker fashion…
-
Laissons IE6 mourir sans style, et ses utilisateurs entrevoir la lumière
Bon, allez, ça va un peu les enfantillages, mais il est temps de montrer aux utilisateurs de IE6 que non, ils n'utilisent pas un bon navigateur, mais que ce sont plutôt des hordes de développeurs Web qui s'arrachent les cheveux pour qu'ils en aient l'illusion. Alors voilà, j'ai décidé d'aider ses pauvres égarés à revenir dans le droit chemin…
-
Oncle Tom m'a envoyé en douce il y a quelques jours une patate chaude en m'invitant à vous parler de mes conventions de codage. Vaste sujet, et surtout très vite trollesque, de quoi se régaler.
-
Afficher les favicon dans la barre personnelle de Firefox sous Mac OS
Dans sa version Mac OS, Mozilla Firefox est configuré pour ne pas afficher l'icône personnalisée d'un site à côté d'un favori placé dans la barre personnelle.
-
CSS : on reprend tout à zéro !
Pompage vient de publier les dernières traductions des excellents tutoriaux « CSS from the Ground Up » de Joe Gillespie, ce qui clôt la série. Un must à lire et relire absolument !
-
Un effet graphique assez répandu, au point d'envahir notamment les interfaces graphiques des différents OS, est celui des ombrages. Les ombres permettent de donner du relief aux interfaces, principalement pour mettre en évidence la supperposition de différentes « couches » graphiques.
-
Gastero Prod 4, les standards et l'accessibilité
L'accessibilité devient petit à petit incontournable.
See all tags.