The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Depressing Box posted:

CSS code:

.carousel-inner > .item {
  -webkit-transition: 0.6s ease-in-out opacity;
     -moz-transition: 0.6s ease-in-out opacity;
       -o-transition: 0.6s ease-in-out opacity;
          transition: 0.6s ease-in-out opacity;
}
...

A lot of this is redundant now:

Firefox dropped the prefix 6 versions back, Chrome 4 versions back, Opera a couple of versions ago (and in the new 15).

http://caniuse.com/css-transitions

# ¿ Jul 12, 2013 09:41

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 10:33

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Winter is Cuming posted:

...So, yeah, family doesn't exist in the business world as far as I am concerned. I recommend you take the same approach.

There's also the bizarre knock-on effects that family members will assume are your fault:

'Ever since you built me that website, my copy of Word stopped doing bullet points! Fix it!'

# ¿ Jul 17, 2013 09:36

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

BTW, on the users-without-Javascript front, FF 23 has removed the checkbox in Options that allows users to turn JS off entirely. You can still do that, but you need to set a flag in about :config instead, which is intended to stop users who don't know what they're doing switching JS off.

Thinking about this, I believe this is a good idea. That option's been pretty hard to find in IE since forever (Options > Advanced tab > scroll down) too...

Sergeant Rock fucked around with this message at 12:48 on Aug 3, 2013

# ¿ Aug 3, 2013 12:45

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Bognar posted:

When IE8 finally drops off the map, IE9 will be the black sheep because of everything it doesn't support in the future.

The problem isn't just IE, it's the people that cling to their old browser versions.

It's also the fact that MS made it very difficult (impossible, in many cases) for them to upgrade without also buying a new OS version.

I'd like to see the default Windows HTML-reliant functions branched off and separated from MS's browser, so that they can finally get the thing on a fast update cycle.

# ¿ Nov 23, 2013 15:13

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

v1nce posted:

Just chiming in to say that while you won't notice the differences in 98% of situations, IE version emulators in IE 7/8/9 don't behave exactly the same as the real thing.
If you're supposed to 100% support IE7/8/9 your best bet is to have a VM running actual copies of those actual browsers.

I believe in IE11 the situation is even worse: emulated earlier versions don't understand Conditional Comments targeted at them. Which pretty much makes them fuckin' useless.

Thanks Microsoft.

Thansoft.

# ¿ Feb 10, 2014 14:38

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Boz0r posted:

I've got some CSS that replaces my checkboxes and radio buttons with nifty little squares and circles. It works fine in IE and Chrome, but in Firefox, nothing shows up:
code:
input[type=checkbox], input[type=radio] {
    visibility: hidden;
}

input[type=radio]:before, input[type=checkbox]:before {
    content: "";
    visibility: visible;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid @textcolor1;
 }
What gives?

FF doesn't allow generated content for form fields, which I think is actually correct behaviour, even though it's a pain in the arse.

You could put the styles on a parent <label> instead.

# ¿ Feb 10, 2014 14:40

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Heskie posted:

I feel like I have to do this sort of bullshit on a daily basis, while the designer stares at me blankly as I plead my case.

Can you use CSS Border-image on the containing element / body?

http://css-tricks.com/understanding-border-image/

# ¿ Mar 20, 2014 10:50

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Heskie posted:

Not while supporting IE7

*points at you and laughs

# ¿ Mar 20, 2014 17:07

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

There's also this new chunk of CSS available, which does what it sounds like:

code:

scroll-behavior:smooth;

Browser support varies, but it's no big deal if it fails, I think. I now apply it by default on the body and any other scrollable blocks.

# ¿ Sep 1, 2015 12:48

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

caiman posted:

I just read Rachel Andrew's book on CSS Grid Layout. I've been playing around with Grids for a couple days and it's absolutely incredible. Once this gets implemented it's going to be a big game changer. Anyone else gotten a chance to mess around with it?

Yep. Between this (intended for large-scale layouts, as I understand it, like entire pages) and flexbox (intended for use inside widgets and smaller layouts), we've finally, finally got real power in web layout.

You can play around with Grid in Chrome, after enabling the Experimental Web Features flag. Looks like they have the most complete implementation out there at the moment.

NB: I'm also using FF45 Beta. The dev release notes refer to Grid being available by default (not behind a flag), but that doesn't seem to be the case. Don't suppose anyone knows what's going on?

# ¿ Jan 30, 2016 11:34

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Leshy posted:

On the earlier topic of CSS variables, I actually have a site that is the perfect use case for them, but I am not quite sure on the best method to implement them with a proper fallback. ....

I essentially need to build in a "Do you support CSS variables? If so, here is <style> --accent-color: [blah] </style>. If not, here is <link src='accent-color.css'>." check. The most straightforward way of doing this that I can see, is doing some browser sniffing and checking the useragent for browser version, then presenting the appropriate solution. However, as browser sniffing is it's own , I could use some input on whether this is a good idea or not or whether there is a better way of approaching this.

You could look at the new-ish '@supports' feature query. So apply your fallback styling by default, then use @supports (in JS or CSS) to see whether native variables are available...

See https://developer.mozilla.org/en/docs/Web/CSS/@supports

# ¿ Feb 15, 2016 13:03

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

caiman posted:

I showed my CSS grid guide to Chris Coyier and he liked it so much he had me port it over to CSS Tricks. Rad.

That's really nice and comprehensive.

One tiny addition - in FF 46+ I am still seeing some sizeable missing features (e.g. grid items not 'clearing' to completely contain their contents, even with the layout.grid.enabled switched on). Dunno if you want to mention that under Broweser Support, or whether it's all too early to care.

# ¿ Mar 27, 2016 10:39

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

When asked to create emails, I have always found that (despite 20+ years writing HTML) claiming 'I know nothing about HTML emails, someone else should do it' works best.

NB: This technique also works when some numpty uses the word 'Sharepoint' in my presence.

Sergeant Rock fucked around with this message at 10:40 on Jun 15, 2016

# ¿ Jun 15, 2016 10:31

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

ynohtna posted:

How are your tables defined and are they truly necessary?

Tables can not be rendered progressively and require multiple passes over the data as contents of one cell can affect the layout of other cells and elements before them.

You can improve table performance (and often their visuals) by using table-layout:fixed in your CSS.

# ¿ Jan 25, 2017 10:54

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Have you folks seen this? https://hypothes.is/blog/annotation-is-now-a-web-standard/

So a 'Comments' area could be spontaneously available on any site/page? Are we going to see weird distributed forums / threads across the whole bloody web? So much for YouTube or anyone being able to 'clean up' lovely comments?

Or am I misunderstanding where and how the data will be stored?

# ¿ Feb 27, 2017 17:22

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Well, you could try leveraging the @supports directive to only feed flexbox to browsers that support it. Then apply CSS for IE9 etc to fake a grid layout.

You could even go crazy and try new CSS grid, using the same technique.

# ¿ Mar 28, 2017 09:26

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

I've seen 12,000 lines of CSS in one file. This is before LESS and SASS existed, and yes it was utterly unmaintainable.

Especially since armies of previous devs had resorted to the 'just add !important' tactic.

# ¿ Apr 3, 2017 09:23

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Either display:grid, with a media query, or display:flex (with a media query that changes 'order') can do that.

Which you use depends on your required browser support.

# ¿ Apr 26, 2017 11:19

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

I would agree with that. Layout via float and absolute positioning is really nasty, bodgy and prone to breaking horribly, especially with resolution changes. Neither method was intended to be used to solve a problem like this.

Flexbox and grid are *the* standards for layout.

# ¿ Apr 27, 2017 09:21

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Thermopyle posted:

So, this is a really noob question I'm sure.

I don't know anything at all about animation and transformation. I mean, I've used jquerys fadein/out and thats about it.

I have a small form that I'd like to animate and transform into a plain card presenting its info when its filled out. If possible, what do I need to do to animate/transition from a smattering of various <input> types to some styled HTML...maybe some <li> elements or whatever with some styling on them?

I'm not only interested in learning an easy way to do this task, but I'd also like to learn more about the subject in general...

CSS Transforms and Animations don't allow you to change one set of markup into another. That would be way outside the scope of CSS. It just lets you change the appearance of your markup. You'll need to use some really nasty JS, probably something like React, to do what you're suggesting here.

Saying that, if it's really just a different look=-and-feel you're going for, you could keep the markup as-is and use CSS to make it look like a card with a list of items on it.

# ¿ Jun 1, 2017 09:26

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

MrMoo posted:

Mixins are coming to CSS to you soon.

I thought that work had been abandoned?

https://www.xanthir.com/b4o00

Sergeant Rock fucked around with this message at 13:19 on Jan 30, 2018

# ¿ Jan 30, 2018 13:17

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

I'm gonna go with 'lazy fuckers can't be bothered to use the proper semantics'.

Using section, article, header etc is good for accessibility and makes scanning a page of markup by eye *much* easier. Nothing worse than twenty nested <div>s spunked over the screen.

# ¿ Feb 6, 2018 11:09

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Analytic Engine posted:

How's this for a web fizzbuzz:
What's going on here, and what are a few ways to get it to what you wanted?
<div style="display:inline-block;width:40px;height:20px">
<div style="display:inline-block;width:20px;height:20px"></div>
<div style="display:inline-block;width:20px;height:20px"></div>
</div>

I believe I can generalise here: wut

# ¿ Mar 8, 2018 10:55

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

You could use a document.activeElement call... have it write to the console.

Sergeant Rock fucked around with this message at 14:56 on Oct 28, 2018

# ¿ Oct 28, 2018 14:36

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

I want to say that 85%+ of the sites I work with as a contractor look like this:

code:

 
<div class="wrapper">
  <div class="container">
    <div class="inner">
      <div class="inner-container">
        <div class="wrapper">
           Content
        </div>
      </div>
    </div>
</div>

And on and on and on. <div>s that do nothing but apply padding, or a margin, or center horizontally, as if it's impossible to apply more than one style to a given element. They're all 'utility' containers that achieve nothing except make the site slower, confuse developers and make it less accessible.

# ¿ Mar 8, 2021 11:20

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Related to the earlier video sizing question - nowadays there is a native aspect-ratio property in CSS. No need for the hideous padding trick any more.

# ¿ Dec 11, 2021 17:08

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 10:33

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Try min-content and fit-content values?

Sergeant Rock fucked around with this message at 22:09 on Jul 21, 2022

# ¿ Jul 21, 2022 22:01

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread