a question about webpage building and javascript

[furrball1383]

Hello, I wasn’t sure which section to put this in. Right now whenever we build a website we tend to have to add prefixes and such to the coding to make certain css effects work. I was just wondering if anyone has already made a javascript thing that simply checks what browser the person is using when viewing the page and based on that automatically adds the prefixes into the code. This would be extremely useful as one wouldn’t have to bother with trying to make sure each element of the webpage has the code to be cross browser compatible. Forgive me for my lack of knowledge on the subject and educate me :D

[Johnnyb]

Hey furrball,

Are you referring to something like either CSS3 Pie or Modernizr?

[furrball1383]

hey Johnnyb thanks for replying, unfortunately CSS3 PIE isn’t what I was looking for as it is set up so that it provides the code that works in IE, and Modernizr helps you check your code and evaluate its functionality in various browsers. For example, say I write out the code for a new website but that I’ve totally geared towards firefox users, but i’ve been too lazy to run through and ensure cross browser compatability and as such the coding just isn’t there. Modernizer would simply point out what would and wouldn’t work and in which browsers. what I would be looking for is possibly a script or product that would simply take what I’ve coded and run through it looking for certain lines that are meant specifically for firefox and then add their equivalent automatically for other browsers using the attribute values already taken from the line it has read. I believe a product like this would save web designers a ton of time. I’m not sure of what the drawbacks might be but I for one sure could use something like this instead of running around half the web looking for a png fix for IE or some such fix for another browser. Seeing as I am learning this stuff by myself, there are gaps in my knowledge that makes doing any cross browser stuff tedious and time consuming for me.

A more graphic description might be this here:

.gradient-bg {
/* fallback/image non-cover color */
background-color: #1a82f7;

/* fallback image */
background-image: url(images/fallback-gradient.png);

/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #1a82f7);

/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #1a82f7);

/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #1a82f7);
}

Within this code taken from “https://css-tricks.com/css3-gradients/” I would expect to be able to put in the gradient info for firefox 3.6 and have the script or program that runs through my code see that line and simply insert the rest of the lines for safari and the rest.

It’s probably just me being lazy, but I thought I might ask if there was something out or if its even possible.

[chrisburton]

I think what @furrball1383 means is instead of writing all the prefixes for the code, you would write the code without them > javascript would check to see what browser you’re using > then apply the prefix. Correct?

Personally, I never heard of something like this but writing the prefixes isn’t such a hard thing to do. Write code > Copy > Paste > Add Prefix > etc.

Edit: Also, if you’re not quite up to par with knowing what works in certain browsers and creating fallbacks then, mockup the site with what you do know and come back to it afterwards when you test x-browser. However, keep learning as much as possible as you know it saves quite some time.

[furrball1383]

yes @ChristopherBurton thats exactly what I meant. The reason I wanted to know if something like this was made, it wouldn’t just be helpful to me but to everyone who codes, as all you’d have to do is build your site and then simply add a js plugin that instantly makes it compatible with any browser. See what I’m getting at? Currently i do use css3 please and a few other sites, but i just feel that a plugin like that would be more than welcome.

[Author]

Posts