Is It Okay To Use Newer Web Tech Yet?

Simple question I just want to know what you guys think about using the likes of CSS3, HTML5 and all other newer forms of web based technologies?

I mean I know this is a bit of a slide and scale topic, some people are all for using CSS3, then I also know of some people who're dead against using CSS3. Myself, I love using CSS3, but that's only because I love to mess around with the latest tech and I love to see what can actually be achieved with CSS3 and HTML5 alone. I mean the stuff I mess around with in my own time, I wouldn't put it live for most websites as it's probably highly experimental, like the kinda stuff you'd see on Codepen or sometimes JSFiddle and even CSS Tricks. I mean it's all cool stuff and it's all interesting, but it's not essentially the best stuff to publish live for a great deal of websites I would imagine. I hope the majority of you agree with me there?

I personally wouldn't bother with things like WebGL, mostly because of how slowly it performs on mobile devices, I mean I think it's F!?$ING AWESOME.... But I can never see myself ever using WebGL for a live website, more of a toy, and even on desktop devices, it CAN be buggy sometimes. Or at least that's what I've found from looking at other people's work.

I mean personally, if I were to make my own website which would basically be a fancy CV/portfolio, then I wouldn't bother with thinking about old users, mostly because I'd use it to apply to jobs where they do use newer tech. But for commercial use, let's be real, there's always that one A?! HOLE who's using a web browser from the dark ages.

How do you guys feel about developing your web applications for people who're using web browsers that are out of date?

Personally I plan on updating my personal website sometime in the near future. I plan on using all the latest tools and tricks, but that's because it'll be my own website, I mean if someone using a browser from way back when is trying to view it, as far as I'm concerned that individual can go elsewhere! :wink:

I'd probably just state that even though this version of my website is made with the latest tech, I can code for websites going back as far as IE6. Which I have done believe it or not. :joy: .... I found that fairly disgusting, but it had to be done, simply because of the computers in a previous place of work were THAT OUTDATED... I didn't think much of that personally, but it was a good learning experience in my opinion! :wink:

This topic was inspired by the fact that my colleague has a recently purchased second hand mac, and he went to log into some admin page for one of the websites we're hosting. Well the browser installed on there is 7 years out of date as it turns out.... So... When he loaded the admin page, the styling was all s*?t. Simply because we're using CSS3 and specifically for a lot of the styling we're using the following feature for a few things:

width:calc(##% - ##px);

Like I said, I love using CSS3, but this has just made me see, right before me how using it can cause for some issues.... Like I also said I love messing around with the latest front end tech, I'd call myself a front end developer more so than a back end developer, I mean I can do a bit of both, but front end is where I perform well. Simply because I've not had access to servers for long, I've never had the ability to REALLY experiment with back end, and as embarrassing as this is, I only discovered the likes of WAMP not too long ago.... So up until recently, I've just gone awol with front end development. :joy:

Whilst we're here talking about web based technologies, what do you guys think about using ruby gems too? I know a TONNE of front end developers are using them these days, I mean look at how popular sass/less has become recently...

Also, do you guys know of any backend ruby gems? :wink: ... I personally do not currently know of any really nice/useful ones at this very moment in time.

I also know that the likes of sass is an iffy subject, like one of my colleague hates using sass because some of the compiles will just fill up your compiled CSS with some code that's kinda crappy. Like he said, not all, but some, hence why he just tries to stay away from it for the time being.

So I'd love to just get some opinions, what do you guys think?

1 Like

Sigh... so much to say here. OK, let's start (I'm probably gonna edit this post a little cause, time is limited and stuff).

First of all, HTML5 and CSS3 aren't one standard as a whole. They are module based. It's not like HTML4 or XHTML a few years back where you had a fixed set of features and the standard was done. HTML5 is more of a headline for "everything new", the same goes with CSS3. That's why there is feature detection (we'll come back to that) in browsers, and there also why there is no doctype anymore (yeah technically there is, but really?).

It always depends on what you're working on, but as I read your post you already know that. Basically you just have to keep in mind where your site is being depolyed to.

Is it an Intranet site, do you have control over what browsers are used? Use the shit out of every Browser Feature you like. Is it a website for an old-people's-home? Eeehh, probably don't go for the flashy stuff. Is it a tech website? Go for whatever you like basically.

Not really true imho, you just have to keep in mind to not use too much stuff because GPU Power is limited. But, it's been shown years ago that JS can run at nearly native speed and you could make a game in WebGL that runs just as fast (or nearly) as a native app, it really depends on optimization. Unity and UE4 come with WebGL support for a few years now.

Oh I'm well aware of that, I was just stating that they're the newer standards, I'm aware that CSS3 is actually newer than HTML5. I was simply stating example.... Like I know the latest standard for JS is ES8, but as far as I'm aware, that is brand new.. I mean I think it's worth taking a look at the latest standards, but it's also good to have a bit of knowledge on older standards for cross platform/browser issues that you may run into? ... I mean I'm just coming out with ideas.

That's another part of this discussion, sometimes I find it's kinda hard to tell, like myself, I'm currently working on a gardening website, and as far as I'm aware that target audience could range from ages ~26+, I think that's a fairly safe statement, don't you think? :slight_smile:

I actually didn't even think of intranet based websites, thank you for actually pointing that out, I'll be sure to keep that in mind in future. I know for a fact that the company I work for does work with some small intranet site of some sort just to view and analyse data.

In that case I'm assuming I've only seen poorly optimized applications then? :stuck_out_tongue_winking_eye: ... Not that I've seen a tonne, but the one's I have had a look at, on mobile, it's not even worth the hassle of trying to load the page. As for Unity coming with WebGL, I actually didn't know that either, that's something cool to keep in mind! :wink:

That's true sometimes, and that's where analytics come in handy. Build the website "safely" to start with, then ramp it up once you know the audience a little better. Many people use Google Analytics cause it's "free", I like having Piwik installed myself though. More control over the data and it doesn't track your users (if you don't tell it to).

It's actually pretty cool. Brendan Eich showed a demo of UE4 on Firefox a few years back on Fluid Conf I think it was (I'd need to search the YouTubes for it, can't access it at work) and it was pretty fluid. And it was still in beta back then. They basically compiled the whole engine to JavaScript.
The main issue with WebGL based games (and that's where I had a talk with some guys from Unity at Amaze 2015(?)) is just storage. LocalStorage is limited to 20MB by default, and currently there is no way to ask the user to store more. As you can imagine you just can't deliver an actual game in under 20MB including the engine (at the demo the files were like 150MB + engine ... soooooooo..... there's that.), so they are still trying to figure out what to do about that. You can't ask the user to download the gamefiles every time they access the page (unless they have a squid in their network :slight_smile: ). Best would be a dialogue option to confirm expanding local storage, but implementing that takes time...

As for the first post:

That's what I meant above, but that's why there is feature detection. You can use modernizr or write something of your own. Depending on the feature you can just gracefully let it go and not use it, or you could use a polyfill. Most features these days have a polyfill already. And if they don't write it yourself, or let the feature go (only available on latest browsers or completely). It's always a good idea to check CanIUse, or just use a preprocessor (LESS, SASS) that might handle prefixing, or postcss or whatever you choose.

Also keep in mind that sometimes it's not just A**holes, but some people (or companies) just remain on Firefox ESR or something, those are quite old at times too (we do at the company, and the updater is kinda weird. FF ESR 52 has been out for a month and Firefox still claims it's up to date on 45).

Been there, done that.

calc() is still buggy in a lot of places sadly :frowning:

Never used ruby, heard good and bad stuff about it, never really cares. LESS is JS based to that's nice, can be used in the browser while prototyping (so you don't have to compile it every time). SASS does have a NodeJS implementation (well, technically a C implementation that is used in NodeJS, but you get the point). Been using SASS more then LESS recently, because back when I used LESS it was missing some features that SASS had, and also Compass was really nice. Pretty sure they're mostly even now.
Haven't tried Stylus yet as another Preprocessor.

You have to REALLY watch out that you're not going to CSS Hell when you're using SASS (or any preprocessor). The code can be very clean but you have to know how SASS compiles stuff to make it clean. It's easy to end up with 10-level-css rules where it becomes a pain to overwrite them elsewhere. That being said SASS has some awesome compile-time features that I wouldn't want to miss anymore. Specifically variables are really nice. Also Chrome has experimental SASS support (you need to enable a flag in the Dev Tools I think). It's really worth learning it imho, you can get stuff done way faster once you're "in the zone".

1 Like

I'm not sure what my company has in place, I know they have something in place because the head of my department is forever talking about the analytics. Could be Google Analytics, I'm not entirely sure, I mean I would assume so, but I can't solidly say so.

I'll have to check that out when I get home I guess, sadly, in work I have access to any website, however there are no speakers... Plus I don't want my boss to talk behind me and assume I'm doing something I shouldn't be doing! :wink:

As for Polyfill, I've never used or even heard of that... To be 100% honest with you... :stuck_out_tongue: ... I have messed around with modernizr before however... As for

I tend to find myself visiting that website fairly often in all fairness.

This is a part of the reason why I created this discussion, I'm only a junior developer, I don't tend to think of things like that. Even though I was in a place of work where they were using freaking IE6, and the best part is that it's not like it was when it was slightly old, it was last freaking year...

It is sad to be fair, I love using calc, just makes it easier than thinking about any margin/padding that you've used in terms of px. I mean I normally do percentages on most stuff so I can just work out in my head width = width you want - margin - padding.... Or something like that..

This is a part of the reason as to why I LOVE writing all my own CSS, I think thanks to being having been in the positions I've been in, I've managed to excel quite nicely with CSS. I mean I'm normally looking on CSS Tricks for something new, and majority of the time I'm able to poke pinholes in the examples and I'm normally finding that I think to myself "I already knew that"...

One thing I HATE about sites like Codepen and such is that I find a lot of people that put stuff on there, yeah, it may work, but it's like they've never heard of W3C. They basically give the W3C guidelines/standards the middle finger, it can be amusing sometimes, other times not so much.

When I was brand new to this whole web dev lark, I was trying alternative methods and approaches, thankfully my lecturer who is an ex web developer, he pointed out issues that occur when you approach things that aren't under the W3C standards. Like some people like to do things like use checkboxes for a navigation system, I personally don't think that's a good idea in most cases, sure there may well be some exceptions, but for a generic navigation system, I'd personally write it all in CSS and maybe JS too, but I try to write most commercial things in JUST HTML & CSS, for two reasons:

  1. It's less hassle.
    • Less code, less testing, less to debug.
  2. There are less cross browser compatibility issues.
    • Just less to go wrong.

I mean obviously sometimes you NEED to use JS. But if I can help it at all, I try not to! :wink:

I'm half tempted to do this certificate:

But then again, the cost is off putting.

1 Like

It basically emulates features that are not yet implemented in CSS to run as JavaScript instead (if that is at all possible). They check if the feature is supported in the users browser (via feature detection API in HTML5), then use CSS preferrably, but fall back to the JavaScript solution if the feature is not available. None of the JavaScript (except for the feature detection of course) is executed if the feature is already supported.

Often times you can find polyfills on CanIUse when they have a feature as not supported or only partially supported. And if it's not, caniuse is actually on GitHub, so if you find a polyfill (or write one) that works you can add it there :slight_smile:

Well, we use IE8 at work. And we can't update because one of our CRM Applications requires certain parts of the system integration that only run on IE8...

But luckily we also have Firefox (which is ew, but w/e), so at least we can actually use the internet.

Well, to be honest. It's good to start with pure CSS. You learn a lot more about how stuff works, but once you're proficient in pure CSS you can go on to more. Of course it's not necessary, but it doesn't hurt having the expertise :stuck_out_tongue:

Not sure what you mean by that. They just give you code examples or how stuff can be done (or for bug reports, whatever). The stuff used is still regular code :slight_smile: Well sometimes they use CoffeeScript or LESS/SASS, but in the end it's all just CSS and JS.

Generally I try that too, and while it's true that every element has an intended use, the W3C doesn't specifically forbid using an element a different way. For your checkboxes example I gotta say I used this before. You probably know about Bootstraps "Hamburger Menu". This thing requires JS, which always bothered me. Just to open/close a menu, that seems kinda silly.

I managed to work around that and did a HTML/CSS only approach with a hidden checkbox. One of my navbvar-items would be a label to that hidden checkbox, with some CSS you can then check for that checkbox being check (hah, get it?) and show the appropriate sub-menu. And this could be used for an infinite number of sub-menus (well, technically not infinite since there's a limit in how deep the DOM tree can go).

Of course the checkbox wasn't a checkbox for the user, but it wasn't out of spec either because W3C doesn't actually state what a checkbox is for, it's usually used as a visual represantation of a check list or choice, but it can be a hidden parameter in an input form too (see honeypot technique). I actually like these kinds of creative approaches. It's a certain satisfaction getting something done in a different way.

Eh, not always, let's just leave it at that :stuck_out_tongue:

Not necessarily. Take calc() as an example. There's little that can go wrong calculating the value in JavaScript, but it can actually crash certain browsers with certain values. So.. usecase I guess :slight_smile:

And then there's the whole thing with W3C and WHATWG which is confusing as hell ... It's not as bad anymore, but it used to be.

Regarding certification:
It's nice to have them, but potential employers usually like having a nice resume and things to show for more then a certificate. Everyone can get a certificate, but if they can actually use the stuff is a different story. Also not sure if this is actually from W3C... w3schools used to do certificates (I think they still do?) and caught a lot of sh*t for it.
Speaking of W3Schools, it's not that bad now, but I'm still kinda sad WebPlatform got shut down :frowning: Brackets also had a nice integration with it, but since I don't use it anymore anyway... eh.

I'd say that's where I'm currently at, I feel like I've mastered a pretty much most that you can do with CSS. I'm at the point where I'm gonna try and include a tonne of JS animation/neat tricks with my more advanced front end stuff.

That's very true, but like my lecturer said, if you do decide to use things in an alternative method, then for the likes of screen readers, it may get confusing.

Yeah.. I'm not the biggest Bootstrap fan out there, I mean it's neat because it saves you having to include all the same features and functionality yourself, but at the same time, it could be better...

I usually tend to make a navigation system that requires JS, and then try to keep it as simple as possible to save errors happening in browser x. I normally tend to also include an alternative navigation menu, normally wrapped up in a noscript tag, or sometimes I'll go above and beyond that again or just chuck an alternative CSS file within the noscript tag, depends on the website itself mostly....

That's exactly the sorta stuff I've seen before, and like I said, it's actually 100% appropriate in some places, not that I can think of an exceptional example off the top of my head, but sometimes that's the way to go. :wink:

Google time! :smiley:

Very true... Very true indeed....

I couldn't agree more! :slight_smile: ... I was just considering in giving it a go not just to help buff up my cv/resume but to actually help me as a developer, not that there's anything wrong with what I'm currently doing, but I think you get where I'm coming from? ...

And yeah, I only tend to use W3Schools for something silly, like if I've forgotten something really basic and I just do a quick Google search, it just saves time like that. I would NOT suggest W3Schools to someone who's new to web dev, like I mean to get you started... Debatable, but there are still better alternatives in my opinion, just looking on Stack Overflow is normally better than W3Schools in my honest opinion, especially when a group of developers have a debate about something! :wink: ... Sometimes you learn good points from their debates, other times I just find it somewhat amusing.

That is true, however using a checkbox with the hidden attribute for example is not supposed to be output by a screenreader according to the spec :wink: The same with display: none properties. As opposed to opacity: 0 (or height: 0; width: 0) for example.
/edit Not sure how that translates to its designated Label though... mh... I should probably look that up some time. Is the label to a hidden checkbox supposed to be output? Mh...

Me neither, but that's not because Bootstrap is bad or anything, just that it's often not used as intended. I see way too many websites that just include ALL of it, then go on to use maybe 3 elements and overwrite half the styles. That's just ... ew. Good lord. There's reason there is a LESS and SASS version, use it people.

Not a good idea SEO wise. Google really doesn't like different content on different devices. Even placement of the navigation in sourcecode supposedly influences rank (hard to say since Google is really quite about the whole SEO thing for reasons).
If you use HTML5Boilerplate (and if you don't, I absolutely encourage you to do so) there's a no-js class on the HTML element. Use that restyle your menu. That's the point of CSS, same HTML, completely different style (see CSS Zen Garden).

It's more of a back-end thing, but it's good to know about it.

Regarding W3Schools it's kinda tricky. They have a very good organisation of stuff, and in most cases the articles are actually quite nice, even though it's somewhat generic text. It's not a writeup of what could be done if you combine X with Y, but it's very good as a quick thing to look up what properties an element has, what values it accepts etc.

1 Like

Now that good sir, that's an excellent point.

Good question, I would've assumed so, but there's no good an assuming things in a scenario like this aye? :stuck_out_tongue:

Tell me about it? .:expressionless:... It's foul right? It's not just me that thinks so? Please tell me this is the case? :joy: ..... I mean if you're gonna use it for tiny parts of it, why not just rip small parts of Bootstrap out? ... Or even better, re-develop it yourself? :wink: ... I enjoy coding so I'd probably just re-develop it for the sakes of it! :smiley:

I won't lie, I would've assumed Google wouldn't look into a noscript tag that much, and as for content on different devices, I usually make a backend script that handles whether to include content for a mobile/desktop device, although it's rare I need to actually include a feature on one device that isn't on the other. There has been a good reason in the past, where it was to do with some mobile app, it was only included if the backend detected a mobile device.

I'm sure I've learned about it a tiny bit before, I remember studying Amazon's implementation of the honeypot, I THINK... This was a good few years ago in my defence! :joy: ... I could've gotten myself mixed up with something else to be perfectly honest..

And that's the only time I use is and that's the only time I'd suggest anyone else use it, if you're a little unsure or you've forgotten something specific and you just want a quick cheat sheet for it or a quick answer. For that it's great. And I can't say it's all bad, thanks to W3Schools I begun learning about regular expressions.

When I DO finally get around to developing my new resume/front end website, would you care to take a look? Thanks to my recent learning curve, I've picked up a nice bit of front end skills in quite a short space of time if you ask me. From AJAX to more advanced Javascript. I recently made a nice algorithm in javascript that loops through a searched term, then loops through each char in the results that gets dynamically placed into some list. It then highlights each char in the results that occurs in the searched term, I.E. if you searched s it'll highlight every s that occurs in the results.

Originally it was stupidly slow, and thankfully, due to learning more and more stuff, I thought of a way around it being so slow. I then sped it up, and I had a HUGE brain fart and I couldn't workout why it was so much faster and why it still worked... But I got there in the end! :wink:

No need to rip it out. There's a configuration tool, where you can select what you need, select your colors and then let it give you just what you need. Or just use the LESS/SASS version and use the config file, which does basically the same. That depends on the workflow of course, I probably wouldn't set up LESS/SASS compiling just for Bootstrap. But if you're using it anyway just use that.
The thing about Bootstrap (as well as Foundation and other Frameworks) - and why I don't like reinventing the wheel - is that they have tons of experience from loads of developers crammed in. So there's some neat stuff to circumvent certain browser issues.

The problem with device detection is that it's not super reliable (the same with browser detection), because User Agent Strings are just all over the place now (just look at User Agents from Vivaldi or any Chromium-based browser). That's what @media queries are for. There is a draft for a device-type media query, but it's not super well supported yet (I think, haven't checked in a while)

Also you're in the whole SEO thing again. Because they look at the content of the pages. Apparently they do check for styling, but that's why elements like <aside> for unimportant stuff exists.

SEO is basically an endless rabbit hole, and nobody really knows what they rate anyway, not to mention it can change any time.

I like to learn about browser issues personally, I feel it just makes me a stronger developer... :stuck_out_tongue:

I do tend to ALWAYS use media queries, and normally I tend to ram them all into one CSS file, just due to the fact that I think about the network... Less files transferred, I mean during development I tend to break the css files up into different ones... I just tend to create a final one and name it style.css or compiled.css or whatever I'm feeling like, but that's for my personal websites, I don't tend to do that for commercial websites, I try to follow coding guidelines that the company has in place, last thing I'd wanna do is get stuck in my own ways! :wink:

I keep SEO in mind, don't get me wrong, but I also try to not worry about it TOO much, like you said, it could change at any time and no one really knows how to build the perfect SEO website, dare I say it, but I think it's actually impossible to build one that's perfect in regards to SEO. I mean there are SO many different parameters to take into account, it's impossible to think about them all....

I dont do enough web development to have an opinion on CSS3 but I have played with HTML5 a bit and I have to say its pretty slick IMO. I cant really see why anyone would be against it though I hardly know anything close to everything there is to know about it. Consider me a scrub.

True, the Bootstrap source is pretty well documented for that though (or used to be)

That's the right way anyway. The browser doesn't care where the media-queries are or how they loaded, it loads up all the CSS rules with and without media queries anyway and applies them appropriately. That's why a concatenation script server-side is pretty useful. You can have your CSS files separated on the server, but then output everything as one file to the browser anyway (or via preprocessors, node-concat or whatever before deploy).

HTML5 is just a big blob of stuff anyway :stuck_out_tongue: No way to know it all.

I thought as much, it's like the whole thing about CSS sprites, great for performance when you think of it like loading in one file only.

I guess that's one way of doing it, call me a pig, but the way I've done it in the past is just by using ctrl + C & ctlr + V :joy: ... I mean it works and does the same thing aye? :joy:

Mostly because people prefer alternatives, i.e. more simplistic CSS & jQuery. I mean the only reason why I'm actually debating in relying heavily on CSS3 to work is down to the fact that my colleague booted up his ol' second hand mac today, and an admin page's style just went to hell... I mean it just proves a point, a web developer's machine wouldn't even render CSS3 or at least it wouldn't render it as expected/correctly anyway....

And let's be real... There are a lot of technologically illiterate people in the world, my family is the perfect example, my cousin can't even do basic stuff in MS Word for god sake.... People like that normally don't even bother updating the hardware unless it's f$*ked. I mean it makes sense, if it's not broken, why bother aye? .... Just save yourself some money and don't bother... But it's the same people who don't tend to update software either, provided it doesn't automatically update itself...

... Like I said, I've had to develop CSS files for IE6 in recent years... shudders... In my PERSONAL opinion, I just wouldn't cater for people using a browser that old, IE8, I'd think about it, but anything older than IE8, I'm sorry but seriously, update your mother f$*king software....

Don't worry, I'm quite the scrub with back end dev, I mean maybe not total noob, but I'm far from classing myself as a pro. Hopefully in a year or a couple of years I can say differently! :stuck_out_tongue:

As for another topic, I've found myself falling in love with material cards recently... IDK what your opinion on them is @mihawk90 & @Adubs .... I mean I've been enjoying them so much I've actually considered making an AJAX & Material cards combo based front end... And because it would be my own personal site, I'm not sure I'd bother with including an official navigation system, maybe a search feature at most... I'm debating it, and I am aware that making a web page/website that mostly runs on AJAX can result in poor SEO, but for my personal webpage/website, I wouldn't care too much about SEO at all! :wink: ...

I mean it would be nice to have good SEO, but I wouldn't loose sleep over it as long as the UX is beautiful... I mean I could write a backend script to mask the URL's depending on stuff like the content... So y'know! :wink:

I've also been looking into preventing a user from printing a webpage a lot recently, sadly the only way I've found is to write some css like so:


But that seems like such a dirty hack to me personally... I've only been looking into it because of a specific website that I'm working on... There's a bunch of print pag buttons and there's also pages that don't need to be printed, I mean I've simply removed the print button from zed pages that don't need to be printed, however ctrl + p still works, I've read that you can't formally stop a user from printing a page, so that's the next best thing?

Yeah, basically. sprites are gold really. There are also tools to automate sprite-to-css "conversion". Meaning you pop in a hundred icons, and it generates a css with the appropriate "coordinates". I forgot the name though.

Sure, whatever works for your workflow. It's just really annoying on bigger projects, because changing just one file means you end up either searching that part in the big file or you just go over every file again.

But that's using a really old browser. Even for "technologically illiterate people" you should just drop support. Just use the oldest version the browser vendor supports when in doubt. For Firefox that would be 45 (ESR), for Chrome that's like 3 versions back I think. For Microsoft it's IE10 I think (because Win7 is still supported) and Edge obviously. All major browsers update themselves these days, so there's no reason to support years-old versions.

Friend of mine had an issue with YT a few weeks back (she's actually somewhat tech-savy), some videos just wouldn't play anymore, turns out she accidentally disabled auto-update somewhere. But frankly as a developer that's not your problem. The browser vendor doesn't support it anymore, why should you?

Microsoft doesn't support it, why would you :slight_smile: I could still kick MS in the butt for making IE8 the last version for WinXP... IE9 had so many improvements, if they just made it run on XP we wouldn't have to develop for 8 for years still...

I don't know much about Material cards, but does it need AJAX? You could just as well make the content hidden and show it on click instead of querying the server. CSS-hidden content is fine for SEO (as far as one could say).

I think I know EXACTLY what tool you're on about, I stumbled upon it last week at some point when I was just looking around for more useful tools to add to my little toolbox that I'm building. :wink:

If it were a bigger project and there were an abnormal amount of CSS files, then without a doubt I would write a script to do it all for me, screw doing all that by hand! :smiley:

I would LOVE to do that, but recently I've had to develop websites for businesses who're run by people who're technologically illiterate, and then they're complaining about how this, that and the other feature(s) don't work.... SO you can kinda see why I actually try to keep them in mind a lot...

That's the nicest thing I've read all day! :joy:

I guess that would be an equally viable option! :wink: ... I personally would only use AJAX because I like to mess around with AJAX whenever I can, to be perfectly honest! :smiley:

Then they should have an IT apartment that takes care of that. But I guess IT is just too expensive...

Messing around with stuff is always good for experience, sure.

Well... depends, does the site have sensitive information that's not supposed to be printed (then you're screwed anyway cause screenshots are a thing) or is it just not meant to be printed because it's trivial information. In any case, the developer shouldn't be making that decision for the user. You don't know in which usecases a user may or may not want to print the page, so don't take away the possibility. You already signaled your intent that it is not supposed to be printed by removing your print button, if they absolutely need to print it anyway, there's no reason not to let them.

also regarding sprites, if you want to go a step further you can also drop the sprite-file alltogether and use base64 encoded images in the CSS file directly :stuck_out_tongue:

I swear a lot of IT staff try to waste money.... :stuck_out_tongue: ... Plus the companies I've worked for, they tend to be small and local businesses, I mean I'm doing it more as a favour, a bit of pocket money, I mean they normally don't have more than let's say 10~15 members of staff, and even then 10 would be pushing the boat out! :wink:

Thankfully not! :smiley: .... I mean I'm pretty sure it's just me being nitpicky... I mean it's not even essential, like at all, it's just something I'd personally want to implement.... I mean I wouldn't want the user to bother wasting ink on some of the pages just because of the fact that it's stupidly trivial...

I guess that's a good point, again, purpose of this discussion is to raise good points, even if it's not necessarily about the latest web dev tech, as long as it has some relation to web dev, it's all good! :wink: ...

Again... TO GOOGLE!

Not your call if the ink is wasted though :wink:

If you absolutely hate your users you could catch the Ctrl-P shortcut in JavaScript with

alert("This is not supposed to be printed, smartass");


Regarding the base64 thing. It has some ups and downs. If the CSS gets too big doing it you end up slowing down your website overall. The rendering is blocked until all CSS files are downloaded, however downloading image files does not block rendering. Comes down to a case basis again. Above-the-fold stuff might be good to have in CSS (so it's there instantly), but images further down might not be. It may also be good to put icons into the css in general if you don't have a lot, because you save an HTTP request for the image-file (there's an interesting talk about this by Paul Irish where he talks about number of HTTP requests and website speed in general). In the end you'd need to measure performance with both approaches.

On a sidenote this is also why by W3C spec the height and width attribute in <img> is mandatory, the layout engine can then render the page and just has to repaint when the image is loaded, if it is omitted it needs to re-render the whole section (and possible other sections due to flow issues).