Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Graceful degradation for transform/translate positioning?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #172610
    halleycarleton
    Participant

    I’m curious, is there a way to implement the transform/translate centering method without really poor degradation in unsupported browsers?

    I never use this in production because it complete breaks the layout in unsupported browsers. So I end up just using some javascript, which I don’t like doing for layout.

    So here’s an example of what I’m talking about:

        .e {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
    

    See the Pen Whats a good fallback for this? by Halley Carleton
    No codepen embedding on css tricks?

    #172612
    Paulie_D
    Member

    I think there are a number of techniques but I think Chris Coyier covered most of them

    https://css-tricks.com/centering-in-the-unknown/

    http://codepen.io/Paulie-D/pen/fEBmq

    #172624
    halleycarleton
    Participant

    Whoops, I sort of confused my question. I wasn’t asking about a centering technique with good support. I was asking about a clean fallback for the transform: translate(); property. I was just referring to the centering method because it is the most obvious and easy to understand use case.

    I meant it to read:

    I’m curious, is there a way to implement the transform/translate *positioning* method without really poor degradation in unsupported browsers?

    I added second use case in the pen:

    See the Pen Whats a good fallback for this? by Halley Carleton ( @halleycarleton) on CodePen.
    <script async src=”//codepen.io/assets/embed/ei.js”></script>

    I cannot get this pen to embed…

    #172625
    Paulie_D
    Member

    Then basically…no, there isn’t one that I’m aware of because by using absolute positioning you’ve kind of restricted yourself to that context.

    The point in using other techinques is for the .no-js scenario. Define those as your ‘fallback’

    I don’t know what the stats are on users with JS turned off but I’d lay good money that the percentage is akin to IE6 users….and I don’t cater for those sort of percentages often.

    If they’ve actually actively turned it off then they know they’re going to get a reduced experience and they can deal with it,

    But that’s just me.

    #172626
    halleycarleton
    Participant

    Then basically…no, there isn’t one that I’m aware of.

    Well that’s unfortunate. I’ll stick with javascript for positioning unknows then.

    I don’t know what the stats are on users with JS turned off but I’d lay good money that the percentage is akin to IE6 users….and I don’t cater for those sort of percentages.

    I’m not sure what you referring to here, but I agree, I don’t cater to IE6 or JS-disabled browsers either.

    #172629
    Paulie_D
    Member

    I was referring to this

    So I end up just using some javascript, which I don’t like doing for layout.

    but perhaps I misunderstood.

    Just use Modernizer and then use appropriate fallback CSS for unsupported features.

    You don’t have to write JS ‘for layout’, after all, that’s not what it’s for really IMO.

    Sure you can but you don’t have to and, I’m of the opinion that you shouldn’t.

    Need to swap a class for a particular effect that CSS can’t do, or select a parent based on a child..then have at it with Js/JQ…but basic layout or tweaking positioning…nah!

    :)

    #172633
    halleycarleton
    Participant

    You don’t have to write JS ‘for layout’, after all, that’s not what it’s for really IMO.
    Sure you can but you don’t have to and, I’m of the opinion that you shouldn’t.

    This is what I was referring to when I said:

    So I end up just using some javascript, which I don’t like doing for layout.

    Using javascript for layout is (generally) bad practice, but in some cases I need to use it if I want to support a browser that doesn’t support the css. For example the image positioning example in the pen. If I want to do that in IE8 I need to use JS to get the width of the image and add in-line styling to adjust the top and left properties. It’s ugly, but if you don’t know the size of the image ahead of time it’s really the only option.

    You’re right about modernizr though. That’s probably the best solution. Just create a stylesheet fallback for the browsers where it won’t work rather than fighting it to make it work with JS.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.