Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to Center in CSS

howtocenterincss.com

Post reply on HN
Print view View original

281–290 of 297 posts

Re: How to Center in CSS

#281

Post by wwweston »

SquareWheel wrote: post #277
dan1234 wrote: post #161

Earlier quoted context omitted.

And anyone who wants to browse with JavaScript disabled…

I stopped worrying about those users years ago. Don't even bother with anymore. It's 2015 and all browsers support JS these days. If you disable browser features then you really shouldn't be surprised when functionality breaks. The same would happen if you disabled CSS or images.

Funny you should invoke turning off CSS and images -- a lot of people have actually worked pretty hard to make standards that would work for cases where visitors had them disabled, or want low bandwidth options, or had their own custom style sheets, or weren't using a visual user agent (or even, for that matter, directing the user agent manually).

A failure of function availability from turning off images or CSS is a failure of developers, not a failure of the platform or user agent. You can find sites even in 2015 that either straight up work or degrade gracefully when being browsed by Lynx (a browser that I don't think has seen even a dot-release update since 1999) because they were put together by thoughtful professionals who understand the platform.

If you're trying to deliver an application that absolutely requires client side computation or specific browser APIs, you can have a pass for choosing the have your site not work without JS.

If your site really is just a series of documents (either static or dynamically computed), though, there really isn't much of an excuse.

Re: How to Center in CSS

#282

Post by SquareWheel »

wwweston wrote: post #281
SquareWheel wrote: post #277

Earlier quoted context omitted.

I stopped worrying about those users years ago. Don't even bother with anymore. It's 2015 and all browsers support JS these days. If you disable browser features then you really shouldn't be surprised when functionality breaks. The same would happen if you disabled CSS or images.

Funny you should invoke turning off CSS and images -- a lot of people have actually worked pretty hard to make standards that would work for cases where visitors had them disabled, or want low bandwidth options, or had their own custom style sheets, or weren't using a visual user agent (or even, for that matter, directing the user agent manually). A failure of function availability from turning off images or CSS is a…

>a lot of people have actually worked pretty hard to make standards that would work for cases where visitors had them disabled, or want low bandwidth options

In cases like this, wouldn't it make more sense to have that information available in an API? Once you've removed all styling and interaction, it seems like something that would work better as simply sending raw data, and letting the client decide what to do with it.

Schema.org is a good example of how this would work with the modern web. Markup relevant data (eg. product ratings, movie times) and let the clients render it as desired. You can still provide CSS/JS for modern browsers.

Seems a lot more elegant to me than designing pages to gracefully fallback when JS/CSS is missing, as that would seriously restrict design.

Re: How to Center in CSS

#283

Post by supercoder »

yAnonymous wrote: post #210
scotty79 wrote: post #196

Earlier quoted context omitted.

What's broken is not Safari but people who buy Macs. ... I can't go any deeper. Still I'd like my site to look good to a meaningful market share.

True, but I wouldn't say 4% is a meaningful market share, so fuck Safari. It's the new Internet Explorer. Leaving the sites broken in Safari (and maybe adding a notice that explains why it's broken) also helps keeping it at 4%.

For starters the market share is far higher than 4% on the desktop, and even more when looking at the mobile / tablet market.

It's more like Chrome is the new Internet Explorer, because lazy web developers decide to only target it, so we end up with sites specific to one web browser.

Re: How to Center in CSS

#284

Post by Touche »

talmand wrote: post #268
Touche wrote: post #238

Earlier quoted context omitted.

It's just too bad you have to add comments to understand what "justify-content: center" means. I mean, I guess it was too much trouble just to give it the semantically correct names.

Seems semantic to me. What would you suggest instead?

align: center; valign: center;

Re: How to Center in CSS

#285

Post by wwweston »

SquareWheel wrote: post #282
wwweston wrote: post #281

Earlier quoted context omitted.

Funny you should invoke turning off CSS and images -- a lot of people have actually worked pretty hard to make standards that would work for cases where visitors had them disabled, or want low bandwidth options, or had their own custom style sheets, or weren't using a visual user agent (or even, for that matter, directing the user agent manually). A failure of function availability from turning off images or CSS is a…

>a lot of people have actually worked pretty hard to make standards that would work for cases where visitors had them disabled, or want low bandwidth options In cases like this, wouldn't it make more sense to have that information available in an API? Once you've removed all styling and interaction, it seems like something that would work better as simply sending raw data, and letting the client decide what to do wit…

When you say "simply send raw data, and let the client decide what to do with it," you're more or less describing the original vision behind delivering markup before we got obsessed with instructions of one stripe or another to control visual presentation.

The crucial question is probably what's considered "raw" -- or perhaps to talk more in terms of web-related philosophy, which media type you'd expect most user agents to be able to handle by default... and despite the (reasonable) popularity of JSON, the answer is pretty much HTML with some kind of microformat information embedded via attributes.

In other words, the schema.org approach is arguably pretty much what you're supposed to do in order to design pages to gracefully fall back. I'm not sure why you might think those two concepts are at odds. :)

Re: How to Center in CSS

#286

Post by sriku »

lolo_ wrote: post #195
pcwalton wrote: post #82

Earlier quoted context omitted.

You're in luck. foo { display: flex; /* opt into the new box model */ justify-content: center; /* "align" */ align-items: center; /* "valign" */ } Vendor prefixes may or may not ruin your day (for now), but the spec is there and is exactly what you want. CSS is no longer "badly broken" if that's your metric.

Unfortunately, though flexbox is nice and a welcome addition, it's not the panacea people make it out to be having used it a fair bit in the past - the details of how it plays with the rest of the layout and the various options are complicated (see http://www.w3.org/TR/css-flexbox-1/ if you don't believe me), and sometimes the interactions are confusing. I still think there's scope for a language that compiles to CSS…

Or maybe GSS - http://gridstylesheets.org/

Re: How to Center in CSS

#288

Post by gurkendoktor »

gurkendoktor wrote: post #191
jekrb wrote: post #23

Earlier quoted context omitted.

I've heard that android's XML layout is terrible (from an android developer) and that iOS auto layout is borderline magic (from an iOS developer). Personally, I don't find css to be that bad at all, but I work in it at least a little everyday so it might just be stockholm syndrome.

iOS developer here. AutoLayout is definitely not borderline magic, and some people hate it. It is inefficient. It is awkward to set up in code, so many people write their own syntactic sugar around it. It crashes hard when it isn't 100% sure what to do with its constraints. Working with multi-line text is still a pain, so you often run into clipped text on iOS if you dare to increase the font size. etc.

Anonymous downvoters, AutoLayout may work great for you, but it is definitely controversial among iOS developers (more so than e.g. ARC). Nothing wrong with pointing that out.

Re: How to Center in CSS

#289

Post by yAnonymous »

supercoder wrote: post #283
yAnonymous wrote: post #210

Earlier quoted context omitted.

True, but I wouldn't say 4% is a meaningful market share, so fuck Safari. It's the new Internet Explorer. Leaving the sites broken in Safari (and maybe adding a notice that explains why it's broken) also helps keeping it at 4%.

For starters the market share is far higher than 4% on the desktop, and even more when looking at the mobile / tablet market. It's more like Chrome is the new Internet Explorer, because lazy web developers decide to only target it, so we end up with sites specific to one web browser.

Yeah, the 4% was wrong, sorry. Anyway, things seem to just work in FF and Chrome, but Safari often requires fixing because of bugs, missing features or Apple doing things differently for no reason. It's annoying.

And like Microsoft, they are so damn slow to release updates and older machines don't even get any.

Re: How to Center in CSS

#290

Post by rivo »

talmand wrote: post #244
rivo wrote: post #237

Earlier quoted context omitted.

This also relies on a container DIV (".overlay"). So Flexbox doesn't help here.

What exactly is your centered div centering to if there's no container div? The .overlay div is the container, the .dialog div is centering itself as defined by constraints of .overlay. I'm failing to understand your expectations.

Let's say this is a modal dialog which is supposed to appear in the center of the screen, fixed (but the size is unknown and may scale with its contents). With any of the existing solutions, the HTML code for the dialog will always be ..., i.e. unnecessary DIVs due to the limitations of CSS. Since it is supposed to float on top of everything else, it does not matter what its container is. May as well be the tag but applying flexbox to that tag is likely not an option.
Post reply on HN