[HN Gopher] No CSS Club
___________________________________________________________________
No CSS Club
Author : Fred34
Score : 205 points
Date : 2023-07-16 10:17 UTC (12 hours ago)
(HTM) web link (nocss.club)
(TXT) w3m dump (nocss.club)
| ttepasse wrote:
| In the mid 2000s there was (and still is) CSS Naked Day, at 9.
| April, when you disable the CSS on your website to show of your
| semantic HTML markup:
|
| https://css-naked-day.github.io
| hot_gril wrote:
| I'm already in the no CSS club (I just use React styles).
| Wowfunhappy wrote:
| Due to the long line length, I had to shrink my browser window in
| order to read this submission comfortably.
|
| I dunno guys, I kind of like CSS.
| ptx wrote:
| On the other hand, if all sites were like this, we would just
| keep our browser windows at a smaller size and it would work
| fine.
| enumjorge wrote:
| We could also all go back to 800x600 monitors. That way, no
| one would have to be subjected to writing the 10 lines of css
| to make text heavy sites more readable ;)
| Gordonjcp wrote:
| No, because then you'd have a short line of text that takes
| up a huge amount of space.
|
| Your lines of text on the screen should never be much wider
| than your hand at arm's length, ever, for any reason. Not
| even if it's an example of a one-liner in bash - wrap that
| line to make it easier to read.
|
| Don't believe me? Angrily click <reply> on this post to
| tell me what an idiot I am, start to type your reply, and
| then hold your hand up palm out at arm's length to the
| screen so it covers up the text box you're typing in.
|
| How big is it?
|
| Told you so, didn't I? And it looks *perfect*.
| rascul wrote:
| > Your lines of text on the screen should never be much
| wider than your hand at arm's length, ever, for any
| reason.
|
| No thanks. Ridiculously short lines are harder to read.
|
| Edit: I also resize the reply text box because it's
| almost too small to be usable.
| Wowfunhappy wrote:
| Decades of research show that long line lengths cause
| people to read more slowly, although it is of course
| possible that you process text differently than most.
|
| "Ridiculously" short is another matter, but by my count,
| "significantly wider than your hand at arm's length"
| means well above 20 words per line.
| wruza wrote:
| _ever, for any reason_
|
| I have a stylebot rule for stackoverflow that makes the
| default container 150% wider so I can read teh codes
| without h-scroll.
|
| Also, I don't always use HN on desktop.
|
| But when I do, that textbox is too narrow for almost
| every code-related post. And too short in general.
|
| Thankfully there is a sizer handle.
| Wowfunhappy wrote:
| > Not even if it's an example of a one-liner in bash -
| wrap that line to make it easier to read.
|
| This is the one case (that I can think of right now)
| where I don't agree.
|
| As part of a larger script, sure, wrap the line so it's
| not way longer than all the other lines.
|
| But a single shell command in isolation is always easier
| to read as a single line, if sufficient horizontal space
| is available.
| jprete wrote:
| When writing outside of a terminal, I wrap single-line
| shell commands with backslashes and space indentation.
| The breaks are at logical clauses, as if writing a
| conventional programming language. I find this much more
| readable than the alternatives. Often my terminal will
| also get it this way, from a copy-paste.
|
| This also usually helps in documentation.
| Gordonjcp wrote:
| If I have to do it twice I stick it in a proper script,
| with some comments, so I remember what it all does next
| time I go to do it. I do this particularly for stuff like
| complex ffmpeg filter chains where I need to do a lot of
| stuff to a video file. By simply running the bash script,
| at some later date I can get it to remind me what it
| does, and suitably mangle the video file.
|
| Then, later on, often weeks later, I use command history
| to scroll back through everything I've typed until I find
| something that looks vaguely like what I originally
| typed, or I don't find it and figure it all out from
| scratch again, having totally forgotten about the bash
| script I wrote.
|
| I suspect this workflow is surprisingly common.
| Gordonjcp wrote:
| Yeah, but how many times do you see a one-liner that's in
| a nice little boxout, but there's a scrollbar and you
| need to slide it backwards and forwards to read the whole
| thing?
| master-lincoln wrote:
| What browser are you using? Mine (Firefox on Android)wrapped
| the long lines nicely.
| codetrotter wrote:
| Desktop browser. Big monitor with high resolution and big
| window = long lines
| lucideer wrote:
| Presumably they're on desktop: long lines don't tend to be an
| issue on portrait screens.
| master-lincoln wrote:
| Ah, never mind. I understood it the wrong way around. So you
| have a big resolution and want shorter lines. Maybe use
| reader mode which applies some css. I still like this for
| content centric websites. My favorite blog also works like
| this for years
| Fred34 wrote:
| I think the trick is to avoid the hr tag and to center the
| pages. I run a no css website https://www.pilledtexts.com/ and
| just have the readable content in .txt files where I can add a
| max width.
| Fred34 wrote:
| Cool, the guy who ran the no CSS club added my site.
| thejohnconway wrote:
| Which is pretty bad on mobile, because the lines wrap before
| the hard line endings, making a long-line/short-line
| repeating cadence which I find really difficult to read.
| Fred34 wrote:
| Added a viewport tag for the html page, I may try to
| display the text in a page and then just link to the .txt
| file.
| lgas wrote:
| Honestly it's not great on desktop either.
| bbrks wrote:
| What's with the encoding on that website? It's virtually
| unreadable in my browser.
|
| e.g. From https://www.pilledtexts.com/files/nick-
| land/february.txt
|
| > aEURoeThis canaEUR(tm)t go on,aEUR he said.
| aEURoeItaEUR(tm)s too blatantly wrong. ItaEUR(tm)s
| insolence.aEUR
| jorams wrote:
| It's UTF-8, but the server doesn't specify that so the
| browser treats it as windows-1252.
| Fred34 wrote:
| Edited my nginx file to display UTF-8, should look better
| now
| Pannoniae wrote:
| What do you mean? It perfectly adapts to any browser width; if
| you want to resize it, just resize the browser window. It's
| perfectly readable on both a 4k screen and a small phone.
|
| What more do you want? :D
| addisonl wrote:
| To not have to resize my window for each website I visit?
| hot_gril wrote:
| Why do you have to resize it?
| yakubin wrote:
| So that it's shaped more like a page of text than a
| telegram.
| Pannoniae wrote:
| The alternative is the "accessible" mush which is common
| nowadays - no matter how big your screen is, the content is
| compressed together into a small strip in the middle of the
| screen, almost like a phone.
|
| No thanks, I'll take fullwidth content anytime over
| that....
| hot_gril wrote:
| There's an ok in-between where wide windows get margins
| and narrow ones use the full width. But yes a lot of
| sites have the stupidly huge margins.
| addisonl wrote:
| The best alternative is a site that is responsive that
| takes advantage of wider screens but not lazy fullwidth.
| Pannoniae wrote:
| Why is full width lazy? It uses all your screenspace;)
| addisonl wrote:
| Because it forces your users to make your site readable
| which is lazily passing off the responsibility.
| codetrotter wrote:
| No one will ever need more than 800x600 pixels resolution
| hot_gril wrote:
| Unironically, somewhere between 1080 and 2K scaling is
| probably all anyone will ever need since humans can't focus
| on more real estate than that. The higher-res monitors all
| scale the UI to that.
| wouldbecouldbe wrote:
| :) I think it's sarcasm.
| sdiq wrote:
| Similarly, I can no longer browse HN on a Firefox browser on
| Android. I am not really sure what exact settings changed. This
| started a few weeks ago.
| psnehanshu wrote:
| These websites have no individual identity, they all look the
| same.
| master-lincoln wrote:
| This probably says more about yourself than these websites.
| Identity should go beyond visuals...
| lexicality wrote:
| Unfortunately the web is a visual medium and humans evolved
| to identify things with their eyes.
|
| Unless your audience is entirely the blind and partially
| sighted, visual identity is pretty important
| bcrosby95 wrote:
| Most books get by with a cover and hundreds of pages of
| only text.
| lexicality wrote:
| I have a bookshelf of books next to me and the only ones
| with even slightly similar spines are books in the same
| series, not to speak of the covers.
|
| I opened a couple of text heavy ones and they all had
| different font choices and minor variations on page
| layout. Most of them had elaborate and unique chapter
| headings.
|
| Book typesetting is a fascinating subject, I would
| recommend anyone who works with websites to look into the
| way typography influences the reader's subconscious.
| (Maybe we'd have less Helvetica spaffed all over the
| internet!)
| kkoncevicius wrote:
| > I would recommend anyone who works with websites to
| look into the way typography influences the reader's
| subconscious.
|
| To me, paradoxically, it reached a point where my
| subconscious associates light or poor typography with
| serious material, and pretty web pages with empty ad-
| ridden content:
|
| Serious vibe:
| http://fmwww.bc.edu/repec/bocode/t/transint.html
|
| Intermediate vibe:
| https://drewdevault.com/2023/06/30/Social-and-parasocial-
| med...
|
| Empty content vibe:
| https://www.theverge.com/2023/7/12/23792382/google-
| notebookl...
| krapp wrote:
| True hackers only read the web directly as source files
| fetched by CUrl and opened in Nano anyway. Only normies
| need anything more than their minds to "parse" or "compile"
| source.
| innocenat wrote:
| You can use table, bgcolor, <font> etc. Or worse, images in
| tables. Just like the old day.
| jjgreen wrote:
| Needn't be in a table, you can still get supercool effects
| https://meyerweb.com/eric/css/edge/raggedfloat/demo.html
| innocenat wrote:
| Then you can't join the no CSS club.
| psnehanshu wrote:
| Yes, but then just use CSS.
| pier25 wrote:
| Content provides identity too.
| psnehanshu wrote:
| Yes, but only half
| lapcat wrote:
| I used to be no CSS, but a little CSS can improve readability.
| There's nothing magical about the browser default fonts, margins,
| etc. And no max-width can be problematic.
|
| You might want this to prevent the text size from changing when
| you rotate to landscape on mobile: html {
| -webkit-text-size-adjust: none; text-size-adjust: none;
| -moz-text-size-adjust: none; }
| 3stripe wrote:
| There's definitely something to be said for "hardly any CSS"
| websites that are brutally functional.
|
| For example was looking at http://www.steephill.tv/ yesterday for
| cycling news (recently shut down sadly)
| Fred34 wrote:
| Another one is https://www.friesian.com/history One of my
| favorite references for philosophy.
| hk__2 wrote:
| > There's definitely something to be said for "hardly any CSS"
| websites that are brutally functional
|
| Yes, but only if we exclude those like the one you linked that
| require horizontal scrolling because of their <table>-based
| layout.
| [deleted]
| butz wrote:
| Maybe it's time to add some decent looking CSS defaults to
| browser, but only for websites without CSS includes. Page width,
| better fonts, maybe even mobile specific improvements could be
| added. Of course, I understand that would introduce
| incompatibility with old websites.
| lolinder wrote:
| > Of course, I understand that would introduce incompatibility
| with old websites.
|
| Why, though? If the website has no styling (we can exclude
| sites that use <font> and friends), the whole premise of HTML
| from very early on was that it only specifies content and the
| user agent controls formatting.
| jakelazaroff wrote:
| The browser is the user agent, so I don't see why changing
| the default styles would contradict that.
| lolinder wrote:
| That's what I'm saying--websites that don't specify styling
| cannot have compatibility problems with changed default
| styles.
| tentacleuno wrote:
| That sounds good, but it'd most likely end up as YACL (Yet
| Another CSS Library).
| lolinder wrote:
| If the browsers implemented it officially it wouldn't be a
| library, it would just be a sane default style.
| qayxc wrote:
| A "sane" default style would require "default" content
| coupled with a "default" viewing device. None of which
| exist. There can't be a one-size-fits-all solution.
|
| In addition, content is more than just text - style,
| design, and layout are information, too.
| lolinder wrote:
| I don't think anyone is suggesting that the new defaults
| be standardized. Each browser should pick defaults that
| make sense in the context they're used.
| Popeyes wrote:
| Doesn't the reader view already do this?
| ezequiel-garzon wrote:
| For completely unstyled sites, _reader view_ should be
| the only view. What guidelines or rules should the other
| /s view/s be following? I say definitely not "nostalgic"
| view!
| yieldcrv wrote:
| all these minimal "layout rejection" website trends look horrible
| and offer nothing to the collective conscious
|
| they are readable and ... load. so, congratulations?
| ftl64 wrote:
| "No HTML Club" stands as the only logical step forward in this
| evolution. Browsers are perfectly capable of rendering plaintext,
| what could we ever need those pesky "tags" for?
| hk__2 wrote:
| > what could we ever need those pesky "tags" for?
|
| Links.
| adr1an wrote:
| Not really if you know how to copy and paste :) (Keeping with
| the sarcastic tone of the ftl64 comment)
| nicoco wrote:
| Hyper ones.
| edent wrote:
| I agree. That's why I made http://no-ht.ml/
|
| I submitted it to the site a few minutes ago.
| fjert wrote:
| Looks even better with view source on a dark background
| tentacleuno wrote:
| Honestly, it looks really good. Cool work!
| dist-epoch wrote:
| Honestly your site is unnecessarily bloated with Unicode.
|
| For an English language site, ASCII is enough.
| Tomte wrote:
| Unless you go to a cafe.
| [deleted]
| SketchySeaBeast wrote:
| I see you too read the flow chart.
| _Algernon_ wrote:
| Perfection
| ftl64 wrote:
| This is art. Perfection, even.
| dicytea wrote:
| The table didn't render that well for me:
| https://i.imgur.com/afFkYe1.png
| edent wrote:
| I suggest you upgrade to a newer version of Internet
| Explorer.
| jwilk wrote:
| Discussed on HN last year:
| https://news.ycombinator.com/item?id=33645398 (32 comments)
| drivers99 wrote:
| Ah, cool, someone already had the same thought:
|
| > I'll eagerly await the ASCII-only "You Don't Need
| Unicode"
| em-bee wrote:
| the foreign language speakers here would like to have a
| word...
| innocenat wrote:
| Good old codepage to the rescue!
|
| (Yes, I know technically codepage isn't ASCII. I guess
| you could use box drawing extension to draw foreign
| language character if you wanted. Or maybe just SVG of
| the text)
| em-bee wrote:
| please not codepages. finally being able to write
| multiple languages in a single document, which is
| something i need to do frequently, really makes a
| difference. codepages were a nightmare compared to the
| simplicity that unicode is in this aspect.
| innocenat wrote:
| Yes, that's the joke.
| ris58h wrote:
| ... but they couldn't...
| Fred34 wrote:
| Nice ASCII art
| unsungNovelty wrote:
| I like the work you share Edent. Big fan of SuperTinyIcons!
| jonatron wrote:
| If you serve this with: Content-Type:
| text/plain; charset=utf-8
|
| You can actually have no HTML at all
| edent wrote:
| I did try that, but a few mobile browsers seemed to choke
| without at least something vaguely HTMLish.
| toastal wrote:
| These make me feel weird. On one hand, I love the way
| justified way it takes me back to old READMEs, GameFAQs, etc.
| but on the other all accessibility is thrown out the window.
| goodpoint wrote:
| No HTML and no HTTP would be even better, unironically.
| em-bee wrote:
| right, because FTP was working just fine.
| thefurdrake wrote:
| Telnet was clearly better.
| em-bee wrote:
| well, obviously!
|
| just the other day i logged into a MUD which presented me
| with an interactive world with a graphical map in color.
| the same MUD has a built-in http server so it can display
| the same information with the interactive and feature
| rich, yet compact telnet interface, as well as the round-
| trip heavy and verbose http/html interface.
| pjmlp wrote:
| Great, finally back to the golden age of OS specific native
| applications with networking protocols.
| NoMoreNicksLeft wrote:
| The "No HTTP Club". Take a look at this beauty...
|
| ftp://192.168.3.79/bestmo~4.txt
|
| Of course, none of you have accounts, so please go ahead and
| postal-mail me for one, I'll get back to you in 6-8 weeks.
|
| NO HTTP CLUB
|
| PO Box 1147
|
| Chungus AL 35035
| mypastself wrote:
| Look at Mr. hoity-toity here with his use of ASCII, as though
| ones and zeros alone can't do the job.
| ignoramous wrote:
| CSS-based trackers can be a thing, if they aren't already:
|
| - https://blog.pastly.net/posts/2016-09-04-how-css-alone-can-h...
| (related: https://news.ycombinator.com/item?id=10833629)
|
| - https://nakedsecurity.sophos.com/2019/05/09/css-tracking-tri...
| sublinear wrote:
| Counterargument: sane users expect consistent presentation across
| all browsers and viewport dimensions.
|
| A CSS reset overrides the user-agent stylesheet and the rest of
| the CSS determines the final style. This is the best practice. If
| you don't like web pages, then don't use them.
|
| The final form of this club would be to settle on their favorite
| serialization format bit banged into their nervous system so they
| can be one with the matrix. /s
| flagrant_taco wrote:
| This is still subjective. Some users would prefer to see
| consistency across all sites they visit rather that consistency
| on the same site across all browsers.
|
| When every site uses it's own reset there's no consistency
| while in the same browser, which is way more common for most
| users that don't have a separate browser for every site they
| visit.
| lolinder wrote:
| This is one of the main use cases for reader mode for me--I
| already have an ad blocker to remove noise, reader mode means
| I don't have to deal with whatever each random site's
| designer thought would be the most readable thing, I can
| standardize all my reading in a format that works for me.
| adr1an wrote:
| I'd rather look at this club as some sort of 'code golf' than
| take it seriously as a manifesto. Actually, even as a manifesto
| their point is valid, as a form of minimalist art. I consider
| the web as to be a canvas for many artists too. You don't need
| to agree to admire their work (e.g. dadaism is not frowned upon
| today)
| sublinear wrote:
| Ok if this is the serious intent (minimalism) then they
| probably want SGML, not HTML. They would also not want this
| delivered using the seven layer burrito that is the OSI
| model.
| CaptainFever wrote:
| I guess those who prefer reader mode and user-agent styling are
| insane, then? /s
| jrm4 wrote:
| Why in the holy hell can we not just PICK THIS FOR OURSELVES?
|
| This is the thing, right? Perhaps we could shoe-horn this in
| behind the ADA or something. Require every website to provide a
| "pocket" or whatever mode.
| PrimeMcFly wrote:
| I'm a big fan of minimizing JavaScript as much as possible, and
| will actively try to use CSS in place of it wherever I can.
|
| No CSS as well? No thanks, I want my sites to look somewhat
| modern and aesthetically pleasing by modern standards.
| MrVandemar wrote:
| > I'm a big fan of minimizing JavaScript as much as possible
|
| Me too! I like to minimise it to 0 bytes.
| jokethrowaway wrote:
| The defaults take between 5-50 years to catch up. But they'll
| still ship plenty of crap you don't care about in the
| meanwhile.
|
| I have now webgpu running in my browser out of the box but the
| same shitty fonts.
|
| By the time web components started being used, React went out
| of fashion.
|
| Don't let me ramble about how much time I spent on rounded
| corners back in the days.
| pjot wrote:
| 58 bytes is all you need. main { max-
| width: 38rem; padding: 2rem; margin: auto;
| }
| spread_love wrote:
| You didn't remove all the default styling added by all browsers?
| This site is styled differently depending on browser.
|
| I suppose that means "you're trying to cover up your lack of
| interesting information"?
| simonw wrote:
| Worth noting that this doesn't have to restrict you to Times New
| Roman: just put this opening tag at the start of your HTML, like
| it's the 90s: <font face="helvetica">
| arcbyte wrote:
| Let the user change their own default font.
|
| For me it shows up as sans serif by default.
| simonw wrote:
| Is that even a feature of mobile browsers these days?
| pcthrowaway wrote:
| Why does the No CSS club add in no javascript?
|
| Is there a club for people who eschew CSS but are comfy with JS?
| toinewx wrote:
| technically there is CSS, that is the useragent CSS. so you mean
| no custom CSS.
| underdeserver wrote:
| Dennis Ritchie's site is given as an example, but it's filled
| with ancient bgcolor and width HTML attributes, which are, how to
| put it, not better than CSS.
| robin_reala wrote:
| They're literally mapped to styles internally in modern
| browsers.
| ilaksh wrote:
| He didn't say that you can't use an SVG element..
| XorNot wrote:
| I wonder if what we're really lacking is just a decent set of
| default web fonts. The main modification I do when I kick out a
| basic HTML presentation of some data is throw in bootstrap so I
| can get a more comfortable font experience.
|
| Shouldn't this be the default though? Why is the default bad?
| Fahata wrote:
| Reminds me of https://motherfuckingwebsite.com/, except they seem
| to be serious about it
| mkl95 wrote:
| CSS will improve your readers / users quality of life if you use
| it properly. To me that's enough to keep using it.
| leonewton253 wrote:
| Is this like "No Nut November" but for Web Developers?
| synergy20 wrote:
| https://watercss.kognise.dev/ I would argue classless css is the
| way to go, you just include a single css file, then write your
| html without touching any css anymore, all related tags in html
| are inherently css-ed for you. a nice trade off for me sometimes.
| lexicality wrote:
| As ever, the staggering difference in readability between
| https://motherfuckingwebsite.com/ and
| http://bettermotherfuckingwebsite.com/ (on desktop at least)
| demonstrates that rawdogging the internet is generally a bad
| idea.
| isaacremuant wrote:
| Personally, the childish "saying motherfucker is shocking/bold"
| style is a bit of a cop out to make a proper argument.
|
| I don't even say it with the typical puritan TV USA mindset but
| just the, give me the facts, not the show. Yelling won't make
| you right, just 14. Specially when it's clearly not a visceral
| reaction but a thought out post.
|
| It's like comedy that thinks saying fuck or shit is funny when
| that's basically the lowest bar of humor. Say it, but style
| matters, the word in itself is not funny (unless you're a kid
| and afraid of someone telling you off, again: boldness).
| scarface_74 wrote:
| > Say it, but style matters,
|
| Would you call this style?
|
| https://m.youtube.com/watch?v=dFrgIrWmTeY
|
| https://m.youtube.com/watch?v=cV9MmqX089A
| stavros wrote:
| I agree, I like a well-placed swearword, but when used as a
| crutch for humor, it falls a bit flat.
| alemanek wrote:
| If you read it in Samuel L Jackson's voice it makes it a
| lot better.
| lelanthran wrote:
| > I don't even say it with the typical puritan TV USA mindset
| but just the, give me the facts, not the show. Yelling won't
| make you right, just 14. Specially when it's clearly not a
| visceral reaction but a thought out post.
|
| Yeah, but if they had done it your way neither you nor anyone
| else would know about it.
|
| Looks to me like they put a lot of thought into the marketing
| of that thought out post
| sigg3 wrote:
| While I appreciate the sentiment, I feel you're missing the
| point. This is akin to maddox's writing. It aims to strike a
| nice balance between satire and self-immolation, but might
| stumble in its attempts.
|
| You're supposed to feel conflicted between the obnoxious tone
| and the rational message. The writing makes fun of know-it-
| alls while also making a well reasoned argument.
| logarhythmic wrote:
| I find it fairly cringe, personally.
| arcanemachiner wrote:
| I don't think you can just say "Maddox" in 2023 and assume
| people will know what you're talking about.
|
| maddox.xmission.com
| Typhon wrote:
| It reminds me of the extreme advertising meme.
| mrits wrote:
| Yelling or cussing doesn't make you 14. I like cussing and
| think that there should be more of it in technical
| literature.
| pdntspa wrote:
| Agreed. The idea that words can bring curses or displease
| some fictional deity is a dated trope with no place in
| modern society. Which means the only reason left is that it
| displeases certain people to hear them... but fuck those
| folks for trying to impinge on freedom of speech
| Narishma wrote:
| The first is more readable to me, mainly due to the lack of
| contrast in the second one.
| lecozi wrote:
| [flagged]
| pwdisswordfishc wrote:
| Well, given the former of the two is much better...
| [deleted]
| JKCalhoun wrote:
| Sadly, no one ever stops at bettermotherfucking and that turns
| out to be the problem.
|
| I'd be happy with a No Ads And No 3rd Party Trackers, Analytics
| or Other Shit Club.
| Aeolun wrote:
| How the 'motherfuckingwebsite.com' looks is entirely up to your
| user agent. If it looks terrible that's not the fault of the
| website.
| toastal wrote:
| You can customize the user agent. Firefox I can set the
| colors & fonts ...and this includes different settings for
| dark themes as well. I prefer this experience; namely on my
| OLED displays I like being able to have #000 black
| backgrounds & on my e-reader, I much, _MUCH_ prefer #000 text
| on #fff for maximum readability. There so many contexts where
| the designer doesn't need to get overly involved versus
| letting users decide.
| TuringTest wrote:
| And still, none of them really _works_ on mobile.
|
| If I zoom in to increase the font size and make it more
| readable, the text doesn't reflow so it forces me to drag left
| and right to read the whole line.
|
| There used to be a time where you could have actual adaptive
| reflowing zoomable text content, but web designers and browser
| developers conspired to break it and make it worse.
| arcbyte wrote:
| Interesting.....
|
| But if you change the font size setting on your browser you
| will get exactly what you want. Odd how zoom and font size
| are not linked the same as on desktop - at least for me on
| Firefox mobile.
| TuringTest wrote:
| Yes, but compare changing the size of small text on a per-
| site basis by changing the browser settings vs simply doing
| a pinch gesture...
|
| There used to be a Firefox extension to force text reflow
| on any website, but recent versions with the new extension
| API don't allow installing it.
| mistercow wrote:
| On iOS Safari, there's a little "A" button left of the
| location bar which lets you zoom to make the text larger,
| reflowing the way you expect.
|
| This makes sense to me. Pinch to zoom is a specific
| affordance which means "make the line segment between my
| fingers be this long". It wouldn't make sense with reflow.
| solarkraft wrote:
| It's just browser developers. And I think it's largely caused
| by the brain worm of "you don't need that on mobile".
| mulmen wrote:
| The first one respects my wishes. If I want to adjust the line
| width I will just adjust the size of my browser window. I have
| a 38" monitor, the second page is an ocean of grey pixels. I
| view white space as a direct insult to my intelligence.
| addisonl wrote:
| I definitely do not want to live in your world where I need
| to manually adjust my window size on each website I visit.
| mulmen wrote:
| Why would you adjust it on every site? You just do it once
| and you're done. It's less effort than all the scrolling
| required by modern CSS.
|
| I don't know about you but I typically have more than one
| window open. Information density is valuable to me, even on
| a large screen.
| lapcat wrote:
| Ironically, both sites attempt to load Google analytics.
| bluescrn wrote:
| Some sites take the 'reduce line width' way too far though, and
| on a widescreen desktop display you're looking at a narrow
| column in an ocean of whitespace.
|
| (It's one of the more glaring flaws of the Reddit redesign...)
| red_trumpet wrote:
| I have mixed feelings about the second one. Yes, line width
| highly improves readability. But I think the grey font makes it
| more difficult to read. And I'm no fan of the increased font
| height, though that might be more personal.
| Tepix wrote:
| I agree about the reduced contrast. Not cool.
| pdntspa wrote:
| There's a design tenet to never use pure black or white,
| that's probably what is going on here
| johntiger1 wrote:
| Yeah my #1 peeve is a striking pure white background
| especially when I'm browsing at night. Maybe they should
| offer day/night contrast options?
| xigoi wrote:
| Decrease your brightness.
| rtheunissen wrote:
| Experiment with monitor brightness.
|
| My phone is always on low brightness at night, but for
| some reason my monitor is always at 100% without
| question, which means light theme during the day (to
| match paper/pencil in front of me) and dark theme at
| night because it is otherwise too much light. Then one
| day, I tried a light theme at night at 50% monitor
| brightness and my eyes relaxed immediately. I realized
| that I have been squinting constantly to brace against
| the maximum brightness.
|
| The usual advice is to instead increase ambient/room
| light but I have the room light set perfectly for writing
| and reading on paper.
| least wrote:
| Decreasing the brightness reduces the contrast which also
| decreases the readability of it. A dark background with
| light text has both higher effective contrast and less
| light hitting your face.
| pdntspa wrote:
| I have never understood this. Black text on white
| backgrounds is fine at night, maybe you should stare at
| screens more or something? Or use something that adjusts
| brightness to ambient light, like most phones do now. I
| personally do not like all this low-contrast nonsense,
| clear and legible is the way to go.
| yoyohello13 wrote:
| I think the comfortability of contrast is subjective. I
| have several coworkers who use higher contrasts themes
| and swear by them, but my eyes start to hurt if I look at
| content that's too high contrast. White text on black is
| by far the worst for me, but I know people who find that
| very readable.
| pdntspa wrote:
| Computers have been high-contrast since the first GUIs
| dating all the way back to Xerox PARC
| (https://crm.org/articles/xerox-parc-and-the-origins-of-
| gui)
|
| Yet I have only ever heard of people complaining about it
| recently, when GUI designed started debasing itself by
| making everything web-based, and zoomers started
| demanding dark mode everywhere. Before that, and in my
| lifetime of computer nerditry dating back to the mid-90s
| (on self-luminescent CRTs!), I have never heard of people
| intentionally turning down the brightness or complaining
| about contrast of anything, whether its a tube TV or
| computer screen.
|
| Which makes this whole preference for low-contrast
| incredibly suspicious. Like it was another one of those
| learned 'ailments' that spread around society like a
| shitty meme.
| yoyohello13 wrote:
| Ok, well. Sorry my preferences disturb you so.
| Tomte wrote:
| https://bestmotherfucking.website/ is my favorite
| (https://thebestmotherfucking.website/ is an abomination).
| [deleted]
| bjourne wrote:
| text-align: justify ruins the readability of the text. Won't
| ever work until browsers become much better at hyphenation.
| LoganDark wrote:
| > Bump that body copy to render close to 16px or more
|
| also known as the default font size in browsers, don't you
| dare override the user's preferred font size for body copy,
| scale everything else in units of rem instead.
| 542458 wrote:
| > don't you dare override the user's preferred font size
| for body copy
|
| I'd bet you that 98+% of users don't even know you can
| change the browser font size. For that overwhelming
| majority of users the size reported by their preferences
| and their actual preferences do not necessarily align. This
| is not a defence of setting smaller-than-16px font sizes,
| but it is a defence of setting larger sizes if testing
| shows it improves user experience.
| FalconSensei wrote:
| > I'd bet you that 98+% of users don't even know you can
| change the browser font size.
|
| The users that need that to be able to read (e.g. vision
| problems) definitely do know that. It's about
| accessibility
| Popeyes wrote:
| I disagree, I field a lot of reasonable adjustment
| requests and a staggering number of people don't know
| about basic functionality. They are also not interested
| in them.
| freeone3000 wrote:
| I'm not going to re-solve problems for users that already
| have a solution but refuse to use it.
| silon42 wrote:
| They do on mobile.
| LoganDark wrote:
| > This is not a defence of setting smaller-than-16px font
| sizes
|
| See: HN, that sets a "10pt" font size, otherwise known as
| 13px.
|
| At least they have a reason and it fits for me. :)
| justcool393 wrote:
| On the contrary, I've always found HN's font size to be
| one of the worst parts about the UI. I actually have a
| userstyle set to override it body {
| font-size: larger; } .comment,
| .default, .comhead { font-size: 14px; }
| .subtext, .pagetop { font-size: 13px; }
| .title { font-size: 16px; }
|
| It's not the prettiest CSS or the most well done, but it
| works and it's better than the defaults imo.
| FalconSensei wrote:
| I do use HackerNews at 150% because otherwise it's
| unreadable
| wizzwizz4 wrote:
| Don't scale _everything_ in units of rem; we want "zoom
| text only" to continue to do what it says on the tin. Only
| scale the things that need to be text-sized.
| Tade0 wrote:
| Things like border-radius are especially fun to watch
| then they're sized in rem.
|
| What was a regular border, eventually becomes a half-
| circle.
| FalconSensei wrote:
| Also spacing/padding increases to much that then at some
| point you only have like 1 word per line, and the screen
| is half blank space
| LoganDark wrote:
| Is there a reason for certain CSS frameworks like
| Tailwind to scale absolutely everything in units of rem
| and ignore px like the plague? Or is that just too far?
|
| I did mean font sizes though. :)
| dmix wrote:
| Everyone jumped on the only-use-rem train when mobile
| started dominating because it provides relative units
| that scale better rather than absolute pixels.
|
| In practice it doesn't really mean much outside of blog-
| like text so when doing layouts it's more of just a
| standard everyone agrees on using everywhere because it's
| easier to stick to one for consistencies sake and it does
| the job. I don't think many frontend devs ever test
| zooming text using a browser anyway, their main concern
| is variations in screen sizes, basically device variation
| not manually zooming text. But I get the arguments to
| limit it to text.
| afiori wrote:
| Modern browsers zoom by increasing the CSS pixel size, so
| now all units are relative
| wizzwizz4 wrote:
| Incompetence, and thus obedience to a mistakenly-
| generalised caricature of "good practice", is my guess. I
| used to use em everywhere for exactly this reason. (The
| only reason I didn't shift to "rem everywhere", "flexbox
| everywhere", "web fonts everywhere", etc. was obedience
| to some _different_ caricature of "good practice".)
|
| I've never seen a CSS framework that's _good_. (Unless
| you count https://simplecss.org/, but that's of very
| narrow usefulness.) They're all made by the kinds of
| people who don't understand web technologies, and seek to
| hide them behind a layer of abstraction so they don't
| have to think about them any more. Unfortunately for
| them, there's a reason the web's how it is. Some of it's
| backwards-compatibility, but most of it is that a large
| group of very clever people failed to find a way to make
| it any simpler without breaking something important; and
| so, the framework people tend to break important things.
|
| If you find yourself reaching for something like Tailwind
| or Bootstrap, just use inline style attributes. It's
| easier for everyone involved.
| afiori wrote:
| Good luck using pseudoclasses, pseudoelements or media
| queries in inline styles.
|
| Wrt Tailwind I still have not used it enough to decide
| whether it is good(tm) but it is not that different from
| writing inline styles.
|
| Apart from optional plugins it is more like a CSS
| preprocessor than a framework (every class expands to one
| or few CSS declaration)
|
| The most frameworky features it has is that it predefines
| CSS variables to allow further customization
| EGreg wrote:
| If you're interested in sites loading quickly in more...
| practical scenarios, read this:
|
| https://community.qbix.com/t/qbix-websites-loading-
| quickly/2...
| eyko wrote:
| And all it takes is a few typographic rules in a style tag.
| karaterobot wrote:
| You actually don't even need the dang internet.
| Julesman wrote:
| Wow. How drastically edgy. What an independent thinker. Really
| sticking it to The Man. Epic.
| arrowsmith wrote:
| https://motherfuckingwebsite.com/ is the same as this except more
| entertaining to read.
| hk__2 wrote:
| And, ironically, with Google Analytics.
| davidgerard wrote:
| I mean, all the best websites are no-CSS.
|
| I felt guilty at adding "<meta name="viewport"
| content="width=device-width, initial-scale=1.0">" so my no-CSS
| site wouldn't look on mobile like a website for ants.
| Tomte wrote:
| Chicmath (https://www.ocf.berkeley.edu/~abhishek/chicmath.htm) is
| a classic showcase.
| qayxc wrote:
| That's horrible to read.
| mlok wrote:
| To all No-CSS webmasters : you can still respect your readers
| light/dark mode preference with this simple line :
|
| <meta name="color-scheme" content="light dark">
| Tomte wrote:
| I consider that the browser's obligation. If I'm not specifying
| any font or background color, I cannot be responsible to add
| special media queries because someone chose a dark theme.
| [deleted]
| Linux-Fan wrote:
| Thank you for bringing this up. I had been looking for an
| "easy" way to enable a Dark Mode on my website without
| overriding user-configured default colors and this seems to do
| it pretty well.
|
| My page uses a minimalistic CSS and only changes the colors for
| syntax highlighting -- which is now slightly broken in the dark
| mode but probably still an improvement over the white
| background for those people who want the dark mode :)
| 50 wrote:
| > only changes the colors for syntax highlighting -- which is
| now slightly broken in the dark mode
|
| might be of use: @supports (color-scheme:
| dark light) { @media screen and (prefers-color-
| scheme: dark) { code { ... } }
| }
| Linux-Fan wrote:
| My current solution is to switch the syntax highlighting to
| monochrome which should work fine for both modes. I love
| the colorful syntax highlighting, though. So maybe I will
| revisit this later to find out if I can do something along
| the lines of what you suggest.
| lapcat wrote:
| One problem though is that the default link colors can be
| unreadable in dark mode. That's why I use @media (prefers-
| color-scheme: dark) to set a:link, a:visited, a:active colors.
| 50 wrote:
| i like the default (unstyled) link colors chrome uses, they
| seemingly do accessibility the best. on the other hand,
| safari's default link colors for dark mode are quite poor,
| e.g., a:link is dark blue, a:visited is purple
|
| worth noting, browsers also treat the default dark mode
| background colors differently: chrome uses black, safari uses
| dark gray, and firefox uses dark navy
| shpx wrote:
| It's really the "html.css-only Club" since you're still using the
| browser's default stylesheet
|
| https://chromium.googlesource.com/chromium/src/third_party/+...
|
| https://github.com/WebKit/WebKit/blob/main/Source/WebCore/cs...
|
| https://searchfox.org/mozilla-central/source/layout/style/re...
| lolinder wrote:
| That's an implementation detail of the user agent, not anything
| to do with the website.
|
| The point is "your user agent should make this readable by
| default, somehow". If it chooses to do so by way of a CSS style
| sheet, that's the user agent's prerogative, but the standard
| doesn't care how it goes about rendering a style-free page.
| shpx wrote:
| You can say "should make this readable" and talk about "the
| standard", but in real life you've chosen this specific
| stylesheet (or its 2 or 3 variations), which effectively
| hasn't changed since the beginning of the Web, for 99.9% of
| the times someone looks at your webpage as your stylesheet
| because it's already preloaded as opposed to choosing a
| different stylesheet because it looks better or some other
| criteria.
| chris_wot wrote:
| I'm sure Mozilla used to allow you to apply your own style
| sheets. I'm a huge fan of producing semantic markup and adding in
| a style sheet to do all the... styling.
| sirpilade wrote:
| Richard Stallman[1] should be appointed honorary president
|
| [1] https://stallman.org/
| Fred34 wrote:
| His site is on my blogroll. I still check it for his political
| takes -- not that I tend to agree with him on a lot.
| CaptainFever wrote:
| I'm surprised by how often he posts, and that his posts
| aren't usually related to free software.
| VitoVan wrote:
| But he do have CSS on the site:
|
| https://stallman.org/common/stallman.css
| lexicality wrote:
| He'd be disqualified because there's loads of CSS on his site.
|
| Just because it's ugly doesn't mean he didn't use CSS!
| efortis wrote:
| The browser's default CSS can be removed with:
| document.head.insertAdjacentHTML( 'beforeend',
| '<style>* { all: unset }</style>')
|
| Or compile a browser without them.
| toinewx wrote:
| this is the real no-CSS.
| excusemyfrench wrote:
| Can we at least add this meta tag in the head of the document ? I
| don't know if it is considered styling but it is not css. My eyes
| will thank you: <meta name="viewport"
| content="width=device-width, initial-scale=1.0" />
|
| Source: https://stackoverflow.com/a/39239194
| kkoncevicius wrote:
| I don't understand why it has to be added to every single page.
| Is there a reason this is not implemented as a default browser
| behaviour for devices where it matters (i.e. mobile phones)?
| OtherShrezzing wrote:
| That'd force a pretty substantial breaking change to a lot of
| sites that don't currently use the tag.
| ezequiel-garzon wrote:
| If the webpage has no CSS at all then nothing will be
| broken, either adding it internally or pretending that it's
| included.
| [deleted]
| ezequiel-garzon wrote:
| It is considered CSS [1], which makes sense to me as this
| relates to styling. What has never made sense in my mind is to
| have completely unstyled pages rendered with microscopic fonts
| on smartphones. Doing so for old sites that, at the beginning
| of the mobile revolution, _assumed on their CSS sheets 1024px
| wide screens_ is reasonable (though still debatable). Not so
| for CSS-free pages, whether they were authored in 1991 or in
| 2023.
|
| I'm sorry if I got carried away, I wasn't replying to you in
| this last part :) For the record, I would also make this
| exception, though it would be neat to be able to select those
| without even the meta viewport tag.
|
| [1] https://drafts.csswg.org/css-viewport/
| lapcat wrote:
| All you need is initial-scale=1.0, and width is redundant.
|
| I discuss this in more detail here:
| https://news.ycombinator.com/item?id=36112889
| xigoi wrote:
| That applies only to Safari. How about other browsers?
| vogon_laureate wrote:
| After the No HTML club trumps the rest, we'll need to have No Web
| Server to finish the job. I see only upsides to this.
| gerikson wrote:
| There's gemini already....
| tgvaughan wrote:
| and gopher still exists
| elif wrote:
| If everyone had a non-css version and browsers had configurable
| style/themes, the web would be a beautiful thing.
|
| Maybe there should be an optional MIME Content-Type:
| text/plainhtml header target.
| metadaemon wrote:
| Maybe I'm in the minority, but I enjoy the modern web for the
| most part. I'd be pretty upset if HTML was the only formatting
| we were allowed.
| 6510 wrote:
| Is the lack of <body> prevents readability mode from enabling?
| qingcharles wrote:
| The HTML in the page is LITERALLY SATAN. It doesn't have a body
| tag and it is not prettified.
___________________________________________________________________
(page generated 2023-07-16 23:02 UTC)