A New Responsive Font Format For The Web | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Nick Sherman gave a fascinating talk at Ampersand earlier this month which was based on an article he wrote called Variable Fonts for Responsive Design. In both the talk and the essay he suggests that we need a new font format to solve complex responsive design problems: …the glyph shapes in
Responsive Images: If You're Just Changing Resolutions, Use Srcset. | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! If you’re implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the srcset attribute on the <img>. Gaze upon this easy syntax: <img src="
Centering in CSS: A Complete Guide | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach fo
Font Size Idea: Px At The Root, Rem For Components, Em For Text Elements | CSS-Tricks
Font Size Idea: px at the Root, rem for Components, em for Text Elements Me, for the last year or so: “rem‘s are so cool! I’m gonna size everything with them, that way I can adjust the font-size on the root element and everything will scale with it!” It was a nice dream. And it wasn’t a disaster. That’s what I’m doing right now here on CSS-Tricks and this is how it plays out in a very simple scena
Autoprefixer: A Postprocessor For Dealing With Vendor Prefixes In The Best Possible Way | CSS-Tricks
IE 10 Specific Styles | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Conditional comments are gone in IE 10. That’s good. IE 10 is a very good browser. Feature detection is a better way to go in nearly all cases. But what if you find some styling situation where you absolutely need to target IE 10? I guess you’ll have to do this. Rogie posted a really simple
Sass Style Guide | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass. Here are some ideas that I’ve been gravitating toward. Perhaps they are useful to you or help you formulate i
Logic in CSS Media Queries (If / Else / And / Or / Not) | CSS-Tricks
Just in case you have brain farts about the logic in CSS media queries about this constantly, as I do. If That’s what media queries are: logical if statements. “If” these things are true about the browser, use the CSS inside. /* IF the viewport is 550px or smaller, do this */ @media (max-width: 550px) { html { background: hsl(0 0% 0% / 0.5); } } Media Queries Level 4 allows for a comparison syntax
Using SVG | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know. Why use SVG at all? Small file sizes that compress well Scales to any si
A Tale Of Animation Performance | CSS-Tricks
Hey @chriscoyier, do you have any source confirming translate() is better than top/right/bottom/left for moving objects please? :) — Kitty Giraudel (@KittyGiraudel) December 10, 2012 Context So we’re all on the same page, what Hugo means is, there are two different ways you can “move” elements. Give the element relative, absolute, or fixed positioning. Then you can use the top, right, left, bottom
Window Inactive Styling | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! You can customize the text color and background color of text when it’s selected with ::selection and ::-moz-selection. We’ve covered that a number of times here in various forms and it’s a cool little trick. Even the HTML5 Boilerplate has it in there by default, using super hot pink, which
Rundown of Handling Flexible Media | CSS-Tricks
When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an <article> that holds a blog post might be 320px wide on a small screen device and 690px wide on some large screen. Text can be resized and will flow nicely to fill a container. That’s not too hard. But media – images, video players, and audio pl
Opt-Out Responsive Design? | CSS-Tricks
Reader Glynn writes in: I’m wondering if you’d ever seen a responsive web design in which a ‘see full site’ link was included. I know that when developing a responsive design we should stay away from hiding content completely, however some users may actually prefer pinching and zooming and using good old fashioned horizontal menus on their devices. Have you seen an example of this and how do you t
"Old" Flexbox And "New" Flexbox | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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. How To Tell If you Google around about Flexbox, you will find lots of outdated
Enquire.js - Media Query Callbacks In JavaScript | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post Nick Williams. Nick emailed me about a new library he created to assist in working with responsive design. Specifically, he was implementing an idea he found here on CSS-Tricks but wanted to do so more intelligently by only running the script when needed. Thus t
CSS Style Guides | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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
Sass Vs. Less | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! “Which CSS preprocessor language should I choose?” is a hot topic lately. I’ve been asked in person several times and an online debate has been popping up every few days it seems. It’s nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one
CSS Image Replacement Museum
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1>) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://css-tricks.com/modular-future-web-components/
Simple Styles for <hr>'s