- This topic is empty.
-
AuthorPosts
-
June 12, 2014 at 8:38 am #172610halleycarletonParticipant
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?June 12, 2014 at 8:54 am #172612Paulie_DMemberI think there are a number of techniques but I think Chris Coyier covered most of them
June 12, 2014 at 11:26 am #172624halleycarletonParticipantWhoops, 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…
June 12, 2014 at 11:41 am #172625Paulie_DMemberThen 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.
June 12, 2014 at 11:50 am #172626halleycarletonParticipantThen 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.
June 12, 2014 at 12:01 pm #172629Paulie_DMemberI 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!
:)
June 12, 2014 at 12:43 pm #172633halleycarletonParticipantYou 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
andleft
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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.