19 ms·
CSS Tips
- t0t4l 5y agoSome good tips in there, thanks for sharing. For anyone looking to really learn CSS for layout the resource I recommend is always https://every-layout.dev https://every-layout.dev Heydon Pickering and Andy Bell know what they’re talking about, and they explain the “how and why”
- raspyberr 5y agoWhat is codepen.io? Why does this website need to load from a third party to show text...
- WORMS_EAT_WORMS 5y agoFantastic article. Learned some things. Well done, loved the read. Surprisingly most of these have great browser support.
- Ancapistani 5y agoA good number of them either don’t work or are irrelevant on Safari/iPadOS. That’s not to say this is a bad article; it’s not. It’s just that there is more to CSS than “here are some rules and ways of using them you might not have thought of”. That’s the real reason front-end dev and design is as difficult as it is.
- excitom 5y agoSafari user here: I didn't see any examples that didn't work.
- WORMS_EAT_WORMS 5y agoWhat... Did you even read the article? This isn't true at all. --- Supported Everywhere: - Typing Effect (@keyframes) - Drop Shadow - Smooth Scrolling - "center" (flexbox) - Truncate Text (uses line-camp) - Resize - Modals (uses :target) - calc - Style Empty (:empty) - Position Sticky (minus some table elements in old versions) - Scoll Snap (partial support in even IE) - Dynamic Tooltips (is just pseudo elements...) - Caret color (except old IE) - Fancy Text (uses background clip, so all but old IE) --- Not Supported Everywhere: - Cursors (mobile, obviously...) - ::selection (mobile ignores) - Custom Scrollbars --- I think if you put it side-by-side like this you really see how inaccurate your comment is...
- drdec 5y agoThe following did not work for me in IE: - Drop shadow - Custom cursors - Smooth scrolling - Truncate text to a number of lines - Custom scrollbars - Sticky position - Scroll snap - Fancy text - The CodePen CSS button
- crazygringo 5y agoIE usage is under 1% now. It's really only used by people for accessing specific legacy apps and internal websites. Microsoft is ending support for it. There is no longer any reason developers building general-audience websites, web apps, or libraries should care about IE support. It's not part of the general conversation anymore. You only need to cater to IE if you're a developer on one of those legacy sites, or maintain a library that has been around for so long it's still actively used by those legacy sites.
- reaperducer 5y agoIt's really only used by people for accessing specific legacy apps and internal websites. And healthcare. And government. And a lot of other non-Silicon Valley and non-hobby industries.
- crazygringo 5y agoThose are the types of legacy apps and internal websites I was referring to. What did you think I was talking about instead?
- drdec 5y agoI understand that and I happen to be one of those developers that has a customer that requires IE to be supported. So I was interested in the behavior of the site under IE. My experience testing the site in IE was different than that of another poster, so I thought I would document it. I apologize for causing you whatever consternation prompted you to react in this way, it certainly wasn't my intent and wasn't anticipated.
- 5y ago
- MR4D 5y agoThis is a nice list of things that are actually useful and surprisingly straightforward to do. Considering how many people (myself included) consider CSS a veritable minefield, I love seeing examples like this.
- cosmotic 5y agoHalf these things should be avoided. Don't mess with scroll or scroll bars. If a user wants smooth scroll, they will enable it in their browser. Snappy scroll is unpredictable and disorienting.
- ta9999 5y agoYeah, if there's an alternative with functioning scrollbars people will probably use that instead. It's always surprising how popular screwing with basic UI elements like that always becomes.
- TechBro8615 5y agoHow did I know this would be the top comment on HN? There are legitimate uses for snap-scrolling, e.g. a horizontal carousel on mobile (or even desktop, depending on implementation), where you want swiping to swipe so the next item is in view. Also, you said half these things should be avoided -- care to list the others? It seems like the theme of the post is "you don't need JavaScript to do this." If some functionality is rarely needed, but does have use cases, it's nice to know that it can be done in CSS without requiring JS (which would be clearly worse).
- pmlnr 5y ago> There are legitimate uses for snap-scrolling https://shouldiuseacarousel.com/ https://shouldiuseacarousel.com/ So... no, there isn't a legitimate use for snap-scrolling. Leave scrolling alone.
- dfabulich 5y agoThat page is mostly about auto-rotating carousels. Don't do that. It's also about making your home page a giant carousel, instead of showing multiple things vertically. Don't do that, either. IMO, one great use for carousels is when you have a product catalog with a bunch of category sections, like Netflix. Each category gets a header, e.g. "Action" "Family" "Romance" "Horror" and each category is a horizontally scrolling list of products, with the next one on the list half-visible on the side, so it's clear that you can scroll it into view. Scroll snap can be pretty good for that.
- not_knuth 5y agoPretty neat. The scroll snapping makes creating a scrollable image carousel super easy.
- Varauk 5y ago> Easily center anything, horizontally and vertically, with 3 lines of CSS This can actually be done with 2 lines now! .center { display: grid; place-items: center; }
- 3dee 5y agoHaven't people been doing this in two lines already? .center { display: table-cell; vertical-align: center; }
- deleted 5y ago[deleted]
- BiteCode_dev 5y agoI was going to say: "let's now wait 10 years for it to be usable", but then I went to canisuse and wow: 96.01% of availability! https://caniuse.com/?search=grid https://caniuse.com/?search=grid
- PinkPigeon 5y agoSome noteworthy caveats from my experience with CSS grids: - Particularly in Firefox they are much slower. When grids start to pile up on a page, performance goes down the drain - Implicit row-sizing is not really a thing in Safari or iOS -> https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug https://stackoverflow.com/questions/44770074/css-grid-row-he... Quote from that SO post: "This is not a Safari bug. It's just a different interpretation of the spec. When dealing with percentage heights, some browsers (like Safari) adhere to the traditional interpretation of the spec, which requires a defined height on the parent. In other words, a percentage height on an in-flow element will be recognized only when the parent has a defined height. Some browsers, such as Chrome and Firefox, have moved past this interpretation and now accept flex and grid heights as an adequate parent reference for a child with a percentage height. But Safari is stuck in the past. This doesn't mean it's wrong, invalid or a bug." Just worth noting, as I had a lot of fun with that one.
- joestrong 5y agoI'd argue that `place-content: center` is better than `place-items: center` as it would handle multiple child elements in a way most people would expect from a simple centering snippet. place-content will position all the children to the center, which is generally what's desired here. place-items, would make each child element center itself within its own grid square
- jspash 5y agoI learned something. But would have been better (easier) if the snippets of code only included the css in question and not fonts/backgrounds etc. I had to read each a few times to find the relevant bits.
- bradstewart 5y agoI thought I knew CSS pretty well, but position: sticky is a new one for me.
- raspyberr 5y agoHere's a really useful thing to bookmark: javascript:(function()%7B(function%20()%20%7Bvar%20i%2C%20elements%20%3D%20document.querySelectorAll('body%20*')%3Bfor%20(i%20%3D%200%3B%20i%20%3C%20elements.length%3B%20i%2B%2B)%20%7Bif%20(getComputedStyle(elements%5Bi%5D).position%20%3D%3D%3D%20'fixed')%20%7Belements%5Bi%5D.parentNode.removeChild(elements%5Bi%5D)%3B%7D%7D%7D)()%7D)() Click the bookmark and sticky things disappear. Some websites are horrific with how much screen space they take up with sticyky banners. That also of course breaks some sites.
- Tade0 5y agoIt's fairly new in general and not widely supported yet: https://caniuse.com/css-sticky https://caniuse.com/css-sticky
- jorams 5y agoYour link actually shows that it's very widely supported by everything but IE, just with a long standing bug in Blink.
- Tade0 5y agoExactly. Full support won't be there until all the marked issues are fixed.
- majewsky 5y ago> It's fairly new in general I used `position:sticky` in a productive website back in 2015, when it was already well-supported in Firefox. What's true is that Chrome only got support for it recently, and since Chrome == the internet nowadays, you will be forgiven for considering it new.
- 5y ago
- sandreas 5y agoI miss the push-button and border-triangle trick;) https://pilabor.com/blog/tricks-you-might-not-know/html-and-css-tricks/#3d-button-push-effect-for-links https://pilabor.com/blog/tricks-you-might-not-know/html-and-...
- vstm 5y agoHmm the link has changed, here's the new one if anyone else is looking for it: https://pilabor.com/blog/2021/03/html-and-css-tricks/ https://pilabor.com/blog/2021/03/html-and-css-tricks/
- newsbinator 5y agoThat page also has some tips I didn't know. > <a href="#!"> (don't jump to page top on click)
- Izkata 5y agoIt isn't anything special like that, it's trying to jump to an element with id="!" but not finding one. Any gibberish after the # that doesn't match something on the page would work.
- system2 5y agoI stopped adding fancy stuff years ago after realizing browser compatibility has real consequences. :D
- pmlnr 5y agoAbout a year ago I seriously considered rolling everything back on my homepage to HTML 2.0, given that was the last one with an actual RFC, though 4.01 had a decent specification.
- vz8 5y agoI'd love to see a "Can-I-use" browser extension when looking at articles like this. Occasionally a project requires IE 10/11 support (state government work) and it's such a shame to get excited about an impossible CSS approach.
- dshacker 5y agoSeems that Microsoft is sunsetting IE11 [1], I wonder if that would nudge the world towards less IE. [1] https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666 https://techcommunity.microsoft.com/t5/microsoft-365-blog/mi...
- PinkPigeon 5y agoWhat's everyone's opinion on simply forcing users of IE11 to upgrade / use a different browser? I understand that one should aim for a certain level of backward compatibility, but when does the time come to drop IE11 support for good? Especially as a smaller webdev-shop, how would one even come up with the resources to maintain that level of compatibility? Eventually there is a trade-off where one may end up losing a (hopefully reasonably small) percentage of customers in exchange for focusing on the experience of those customers who are more up to date, but it's a tricky decision to make.
- detaro 5y agoIMHO totally depends on what you are doing and who your users are. Generally going for graceful degradation should keep a lot of stuff usable for outdated browsers, even if not full fidelity/pretty, and that often should be enough. If you have lots of IE11 users for whatever reason (i.e. I believe in some countries rates are a lot higher) it might be worth the effort to make it better for them. If you ship an internal app for a company that rolls out a newer standard browser everywhere, target that.
- deleted 5y ago[deleted]
- vbernat 5y ago
- TurplePurtle 5y agoCool stuff, but wish there was a disclaimer saying many of the things here are Chrome-only. The target audience for this might not consider browser compatibility from the get-go and have to re-think their UI later.
- brundolf 5y agoI'm not sure what you mean; I just tested and all of the examples seem to work in Firefox. Many of them rely on features that have come out within the last couple years, but there's a big difference between "modern" and "Chrome-only".
- matsemann 5y agoSome of them are using webkit prefixes, and those only. So it's easy to think they won't work everywhere. But some of those have been added as standard (with the webkit prefix for all browsers), like explained here: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-lin... Which of course is a consequence of it being widely used before it was a standard forcing other browsers to adopt..
- lwansbrough 5y agoOne trick that I'm pretty sure I invented is useful in the case where you may be implementing some sort of Material Design palette: you want to use shades of a colour without manually defining them but are losing saturation if you simply use ie. `rgba(255, 255, 255, 0.2)` -- just add `backdrop-filter: saturate(120%)`. This forces the browser renderer to over-saturate the white by mixing in the background colour. Unfortunately Firefox doesn't recognize this CSS property yet but it works fine in WebKit et al.
- joemi 5y agoInteresting, though I would have liked to see the browser support for each of these. Seeing so many -webkit prefixes is a bit concerning.
- elliekelly 5y ago> * Cursors Did you know that you can use your own image, or even emoji as a cursor? This was the very first bit of CSS I ever learned thanks to my first internet friend, Tom.
- all2 5y agoI was rather taken by Tom's introduction to scrolling text by way of the marquee tag.
- darepublic 5y agothanks for the typing tip, I once considered using a jquery lib to do the same
- spheroidmethod 5y agoThe tooltip example sounds neat, but that approach will run into problems when your tooltips need to appear near the edges of the viewport. Libraries like popper.js (no affiliation) exist to solve this specific problem.
- rchaud 5y agoPopper.js is required for tooltips in Bootstrap.
- runarberg 5y agoScrollbar styling is arguably a lot easier using the standard CSS-scrollbars-level-1[1] scrollbar-color: rebeccapurple gold; scrollbar-width: thin; As a bonus it works in firefox. 1: https://drafts.csswg.org/css-scrollbars-1/ https://drafts.csswg.org/css-scrollbars-1/
- ArlenBales 5y agoOkay, the ":target" psuedo class just blew my mind. Not necessarily for modals (which I don't particularly like) but I can think of a lot of other uses. Edit - Apparently it's been around for several years. Not sure how I missed this.
- deleted 5y ago[deleted]
- qubitcoder 5y agoLikewise! That's actually the reason I submitted the article.
- memco 5y agoI used it several years ago to create deep links to a list of audio files on the homepage of a site I built. By default the controls were hidden, but if you clicked one of the titles in the list it would show the controls and update the url so you could share a link to that specific item with no JS required.
- rchaud 5y agoGood list, I did not know that text image mask effects were so simple. In fact half of these examples covered things I had no idea about. The custom scrollbars example did not work on Firefox on OSX. all the boxes had identical scrollbars, the OS default.
- frosted-flakes 5y agoFirefox only implements the newer standardized scrollbar properties "scrollbar-width" and "scrollbar-color". https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-w... https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-c...
- klausjensen 5y agoWhat a great post, I learned a lot! I really liked the ones about truncating text - which also taught me what "ellipsis" means. It is the dots in this example: This text is trun...
- emmanueloga_ 5y agoHTML tip: provide an ID to headers so you can link to them directly! :-) Also, provide an anchor so users can just copy the link and not have to inspect the html or use an extension to link to your headers.
- robertoandred 5y agoDon't use their modal trick, it breaks accessibility.
- Zarel 5y agoCan you be more specific? What specific thing breaks? Screen readers?
- robertoandred 5y agoIt doesn't trap focus.
- breakfastduck 5y agoAlso seems to play weird with the go back browser functionality
- jay_kyburz 5y agoThat custom scrollbar tip doesn't work very well in Firefox :)
- citrus1330 5y agoI learned some new techniques here! Thanks!