10 Handy Backup Methods For CSS and Javascript

Backup methods come in handy when catering to the diverse needs of your website visitors. Not everyone browsing the internet uses the same operating system, web browser, or even hardware. These factors all affect how your webpage appears on their screens. When working on new CSS or JavaScript tricks, you often encounter technical glitches.

But don’t get disheartened by these obstacles! In this guide, I’ve compiled a list of the most practical backup techniques for web designers who focus on CSS and JavaScript/jQuery. When all else fails, you should ensure that users can at least access basic page features. In the realm of user experience design, simplicity is key.

Take a look at our guide below and don’t hesitate to share your thoughts and questions in the comments section.

When it comes to web design, CSS3 techniques have become incredibly popular. One particular technique that stands out is the use of border-radius to create rounded corners. It’s a great way to add a touch of elegance to buttons, divs, and text boxes. However, there is one issue – not all web browsers support this feature.

Unfortunately, older browsers like Internet Explorer 7 don’t have built-in support for border-radius. So, if you want to ensure rounded corners work for all standard browsers, you’ll need to come up with a solution. And that solution involves using images as a fallback.

By creating images of the rounded corners and using them as background images, you can achieve the same effect even on browsers that don’t support border-radius. It’s a bit more work, but it’s worth it to ensure a consistent and visually appealing design across all browsers.

With this technique, you can create rounded corners that will look beautiful on any button, div, or text box, regardless of the web browser your users are using. So go ahead and give it a try – your website will thank you!

The code that’s usually used includes CSS3 properties applied to the main div, which takes into account the images that go on each corner. You might have to add some extra divs within the main container to show the corner images in the background.

Here’s the code:

“`html

The standard code uses regular CSS3 properties on the main div while accommodating for images on each of the corners. You’ll likely need to set up some extra divs within the main container which are used to display corner images in the background.

#mainbox {

-webkit-border-radius: 5px; /* Safari */

-moz-border-radius: 5px; /* Firefox/Gecko Engine */

-o-border-radius: 5px; /* Opera */

border-radius: 5px;

}

#mainbox .topc {

background: url(‘corner-tl.png’) no-repeat top left;

}

#mainbox .topc span {

background: url(‘corner-tr.png’) no-repeat top right;

}

#mainbox .btmc {

background: url(‘corner-bl.png’) no-repeat bottom left;

}

#mainbox .btmc span {

background: url(‘corner-br.png’) no-repeat bottom right;

}

“`

2. Creating a jQuery Dropdown Menu System

Dropdown menus are a great addition to websites nowadays. But what if someone visits your website without having JavaScript enabled? Without JavaScript, your menus won’t work at all! So, how do we solve this problem? Well, the answer lies in using CSS to show or hide the sub-menu sections when you hover over them.

The thing is, Internet Explorer 6 doesn’t support CSS hover selectors. But hey, don’t worry! IE7 and all other browsers are totally cool with it as long as JavaScript is enabled. Oh, and there’s this awesome tutorial on CSS Plus that I found which has some great code for solving this problem, including using jQuery and the CSS you need for IE. It’s been super helpful to me!

Here’s another option you can try: just show all the menus openly in IE6. You can use Internet Explorer conditional comments to apply different stylesheets based on the browser version. It might not be the prettiest solution, but it’ll get the job done.

If you don’t think Internet Explorer 6 is a big problem, then you don’t need to worry about this backup plan. The instructions and code I provided earlier should be sufficient to make your JavaScript menu work properly in all the major browsers, even with strict CSS.

3. Styles for Targeting Internet Explorer

We all know about the rendering issues in Microsoft’s Internet Explorer. I have to admit that their latest versions, IE8 and future prospects with IE9, show some improvement. But there are still some people using IE6 and IE7, and we can’t ignore them just yet.

Hey there! Let’s talk about conditional comments. They’re a nifty tool that can help us reformat parts of a web page. You see, sometimes we come across tricky situations where certain elements on our page don’t work properly in certain browsers, like Internet Explorer 6. For example, let’s say we have a dropdown menu with sub-navigation that relies on JavaScript to function in IE6. Well, if JavaScript isn’t available, we’re out of luck if we try to use CSS as a backup plan. In this case, the best solution is to display each sub-list as a navigation block.

Here’s what you can do: add the code snippet provided above to the header of your document. This will allow you to specify the display type for each sub-navigation. The great thing about this fallback is that you can still dynamically show or hide menus if JavaScript is enabled, even if you overwrite the CSS. Otherwise, you’ll simply display an open list of links. If you’re interested, you can use a similar code like the one I’ve included below.

I’ll start by rewriting the provided text, infusing it with a distinct voice, simpler language, and a conversational tone while preserving the HTML markup:

#nav li {

position: relative;

width: 150px; /* You must set a finite width for IE */

}

#nav li ul {

display: block;

position: absolute;

width: auto; /* Sub-nav codes */

/* Define your own width or set in the li element */

}

#nav li ul li {

4. Legacy IE Opacity/Transparency

}

• 4. Legacy IE Opacity/Transparency

Alright, here’s my take on the rewritten text:

#nav li {

I position myself and I have a width of 150 pixels. It’s important for IE to have a width set, otherwise things can get messy.

}

#nav li ul {

My sub-menu is visible and positioned absolutely. I automatically adjust my width to fit the content. If you want a specific width, set it in the respective list item.

}

#nav li ul li {

4. Legacy IE Opacity/Transparency

}

• 4. Legacy IE Opacity/Transparency

One thing that always bothers me about Internet Explorer is its issue with opacity. You see, CSS3 has this cool feature called alpha-transparency, which allows you to adjust the transparency of an element using the opacity property. Unfortunately, only Internet Explorer 9 supports this feature. But don’t worry, there’s a workaround for targeting IE6 and above using a proprietary setting called filter. Take a look at the example code below:

“`css

.mydiv {

opacity: 0.55; /* CSS3 */

filter: alpha(opacity=55); /* IE6+ */

}

“`

Isn’t it frustrating when Internet Explorer doesn’t behave like other browsers? Well, one particular bug that annoys me is the way it handles opacity. You see, in CSS3, we have a property called opacity that allows us to make elements partially transparent. It’s a great feature, but guess what, only Internet Explorer 9 supports it. Typical, right?

But don’t worry, where there’s a will, there’s a way. If you want to target IE6 and above, we can use a workaround called filter. It’s a proprietary setting that IE recognizes. Let me show you how it works:

“`css

.mydiv {

opacity: 0.55; /* CSS3 */

filter: alpha(opacity=55); /* IE6+ */

}

“`

So, even though it’s a bit of a pain, we can still make our designs work on Internet Explorer. We just need to be a little creative and find the right solutions. Keep on coding!

If you want to make an element transparent, simply add the line above to it. It’s important to note that any child elements will also become transparent. If you’re specifically targeting Internet Explorer 8, you can use the code below instead. It functions the same way as the filter property, but it’s only recognized by IE8.

-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity=55)”; /bin /boot /dev /etc /home /initrd.img /initrd.img.old /lib /lib64 /lost+found /media /mnt /opt /proc /root /run /sbin /snap /srv /sys /tmp /usr /var /vmlinuz /vmlinuz.old IE8 */

5. Making CSS3 Buttons with Alternative Images

Buttons are awesome for all sorts of things on websites. They work as forms, links, and even navigation. With CSS3, buttons can look really cool with stuff like colors, shadows, and rounded edges.

But not all people can see the fancy buttons you make with CSS3. So when you make a design that needs buttons (or anything else like buttons), you have two choices. The first choice is to use a picture as the button. The picture can look just like the fancy CSS button you want. If you know how to use Photoshop, this is easy to do. But if you don’t know how, it can be hard.

Alright, listen up! I’ve got a way for us to deal with this problem. So here’s the deal: when it comes to making fancy backgrounds with cool colors and styles, we sometimes need to use a fallback option. What that means is that if a person’s browser doesn’t support the fancy stuff, we have a backup plan. We can use a plain background color and simpler CSS styles instead. It may not be as exciting, but it gets the job done.

Now, I gotta give credit where credit is due. I found some really neat code examples over at CSS-Tricks. They have this awesome post about these things called CSS3 gradients. The best part is that all the important browsers like Safari, Firefox, Chrome, and even Opera support these fancy properties. That means we’re in business, right?

But here’s the catch. Those older browsers like the ancient Mozilla engines, the dreaded IE6/7, and maybe even Mobile Safari, they might not be as hip to the latest trends. So that’s where we might run into some issues. But hey, let’s focus on the positives, alright? We’ve got this!

When looking at the file structure of a computer, it can seem quite overwhelming at first. There are so many different folders and files, where do you even begin? Let me break it down for you.

At the top level, you have the root directory represented by the forward slash “/”. This is where everything starts. From there, you have a number of different directories, each serving a specific purpose.

First, we have the “bin” directory. This directory contains executable files that are essential for the functioning of the system. Think of it as the command center of your computer.

Next, we have the “boot” directory. This is where the necessary files for booting up your system are located. Without these files, your computer wouldn’t be able to start up properly.

Moving on, we have the “dev” directory. This directory contains special device files that allow your computer to communicate with hardware devices such as printers and keyboards.

Then, we have the “etc” directory. This directory contains system configuration files. These files determine how your computer operates and can be modified to customize your system to your liking.

The “home” directory is where user-specific files and directories are located. Each user on the system has their own folder within the “home” directory to store their personal files.

The “lib” and “lib64” directories contain shared library files that are used by various programs on your computer. These files provide essential functions and resources that programs need to run.

If you ever accidentally delete a file and can’t find it anywhere else, don’t panic! There’s a good chance it’s in the “lost+found” directory. This is where the system puts files that it has recovered but couldn’t determine their original location.

The “media” directory is used to automatically mount removable storage devices such as USB drives and CD/DVDs. When you plug in a USB drive, for example, it will show up as a folder within the “media” directory.

The “mnt” directory serves a similar purpose as the “media” directory. It is used to manually mount filesystems and network locations. If you want to access files from an external hard drive, for example, you would mount it in the “mnt” directory.

The “opt” directory is used for optional or third-party software. This is where you will find programs that you have installed that are not part of the base system.

The “proc” directory contains information about processes running on your system. You can find detailed information about each process by looking inside this directory.

The “root” directory is the home directory of the superuser, or root user, who has complete control over the system. You won’t find any personal files here, but rather system-related files and configurations.

The “run” directory contains temporary files that are created by processes running on your system. These files are typically deleted when you reboot your computer.

The “sbin” directory is similar to the “bin” directory, but it contains executable files that are used by the system administrator. These files are usually not meant to be executed by regular users.

The “snap” directory is used by the Snap package management system. Snap packages are self-contained packages that include all the dependencies needed to run a program.

The “srv” directory is used for site-specific data which is served by the system. It is typically used by servers to store website data.

The “sys” directory contains information about the system itself. It provides a way for programs and the kernel to access and modify various system parameters.

The “tmp” directory is used for temporary files. These files are typically deleted when you reboot your computer, so they are a great place to store files that you only need temporarily.

The “usr” directory is where most of the user-accessible programs and files are located. This includes things like applications, libraries, and documentation.

The “var” directory is used for variable files. These are files that change frequently, such as log files and spool directories.

Finally, we have the “vmlinuz” and “vmlinuz.old” files. These files are the Linux kernel, which is the core component of the operating system. The “.old” file is a backup of the previous kernel version, just in case something goes wrong.

So, that’s a basic overview of the file structure of a computer. It may seem complex at first, but with a little bit of exploration, you’ll soon become familiar with the different directories and files. Happy navigating!

I have stumbled upon a small issue when using only images as a backup method – the lack of an active state change when a user clicks on a button. One possible solution is to create two separate images for the regular and active states, although this would require extra effort. However, this alone might convince you to use a solid background color instead of fallback images. To determine which option works best for your layout, I suggest trying out a few different solutions and seeing which one looks the most appealing.

6. Mobile Content Check

Something I’ve noticed is that the popularity of mobile Internet browsing is on the rise in 2012. With smartphones being so prevalent and data connections becoming more accessible, many designers are considering creating fallback layouts specifically for mobile users. These layouts would ensure a smooth browsing experience for those accessing the website on their phones or tablets.

I have noticed that some mobile web browsers, such as Mobile Safari and Opera, display web pages in a way that is similar to how they appear on a desktop computer. While this feature may be convenient, it doesn’t always make the pages easy to use on a mobile device. However, there is an opportunity to improve the user experience and make these pages more mobile-friendly.

Hey there! Did you know that there are two ways you can detect if someone is using a mobile browser and show them a different layout or design? Pretty cool, right? Let me break it down for you. One way is by using JavaScript, which is a tool that works great on the front end of a website. The little script I’m about to show you is super simple, and it only checks if someone is using an iPhone or an iPod Touch. Here it is:

“`javascript

// Redirect iPhone/iPod Touch

function isiPhone() {

return ( (navigator.platform.indexOf(“iPhone”) != -1) || (navigator.platform.indexOf(“iPod”) != -1) );

}

if (isiPhone()) {

// Do something special for iPhone/iPod Touch users

}

“`

Pretty neat, huh? But wait, there’s more! Another alternative is to check for mobile browsers using a language called PHP, which works on the back end of a website. You can check for a variable called “HTTP_USER_AGENT”. If you search for these terms on Google, you’ll find lots of websites with examples. But hey, I have a better idea! Remember that awesome website I mentioned earlier called Detect Mobile Browsers? They have a more detailed script you can use instead. Trust me, it’s pretty fantastic!

You won’t believe the number of free scripts available for download on this site! Not only do they have PHP scripts, but they also cover a bunch of other popular languages like ASP.NET, ColdFusion, Rails, Perl, Python, and even server-based code like IIS and Apache. It’s like a treasure trove for developers.

Get Ready for the Coolest Image Slider

Hands down, my favorite CSS3 freebie of 2011 has got to be the Slicebox 3D Image Slider created by Codrops. Let me tell you, it’s a sight to behold. This baby uses some seriously slick CSS animation transitions, but here’s the catch: it only works in certain browsers. Right now, you can enjoy it on Google Chrome and the latest Safari, but for some reason, Firefox and Internet Explorer 9 just can’t handle the awesomeness.

I love this code because it has a neat feature – it can still work even if there are no fancy CSS3 animations. It may rely on jQuery for most of the animation, but the fallback option using basic CSS is quite dependable, especially since many browsers don’t support flashy CSS3 animations.

On another note, Codrops has recently come up with a different kind of image slider that uses even more creative CSS3 techniques. This one uses background images in CSS, so it still works smoothly even without any transition effects.

Now let’s move on to the next topic: the jQuery Script CDN Failsafe Method.

The jQuery library has become almost necessary for building JavaScript on the web. Many different websites offer static URLs where they store all the different versions of jQuery. Google, Microsoft, and jQuery itself have all created a place where developers can access jQuery, as well as a few other lesser-known sites.

There are probably thousands of developers who rely on these websites. But what if any of the links stopped working or the servers went offline? It would be a good idea to have a local copy of jQuery just in case. And luckily, CSS-Tricks has a code snippet that allows you to do that!

9. Unique HTML5 Checkboxes: Creating Custom Style for Your Website Forms

Imagine being able to make your website forms look cooler and more engaging. Well, thanks to HTML5, it’s now possible! HTML5 brings a whole new level of customization to elements like checkboxes, allowing you to create unique styles that perfectly match your website’s design.

Recently, I came across a brilliant CSS/jQuery tutorial from early Spring 2011 that teaches you how to create Apple-style switches for checkboxes. What’s great about this tutorial is that it provides a simple method for creating these switches and ensures they work seamlessly even on older browsers. The secret lies in using background images to replace the default on/off styles, which gives you complete control over the appearance.

I hide the original input checkboxes by default, and their values are determined using JavaScript calls. This means you can easily retrieve the value through jQuery at any time, and it will also be included in the form when you submit it.

If JavaScript is disabled or not supported in older browsers, the script will switch to regular HTML inputs. This will also disable the CSS styles for the newer checkbox designs, so it will appear as if nothing has changed. The script serves more as a visual upgrade with a fallback option than anything else. However, these sliders look amazing, and you can use the same techniques to enhance other form input fields like select menus and radio buttons.

10. HTML5 Supported Video

The HTML5 specs have made significant advancements in various areas. The video and audio elements now offer improved native support for many types of media files. However, it turns out that not all HTML5-supported browsers agree on which file types to use.

In most cases, Mozilla Firefox supports .OGG video files, and you can convert them using VLC. On the other hand, Google Chrome and Safari prefer .MP4 or H.264 encoded .MOV files. Due to these differences, you would typically need to include three different video formats: the two mentioned above, along with a fallback option using an .FLV file.

Luckily, a group of really smart individuals created a fantastic library called VideoJS. It’s a super tiny JavaScript build that allows you to use Flash and HTML5 video in one tag. Best of all, it’s free to download and open source, so developers like you can contribute to it. The Flash and HTML5 video players are specially designed to be the same, so everyone gets the same experience. Take a look at this example of how to embed HTML5 video:

Following a similar path, the html5media project offers a way to bring together all streaming media into one file type. Unfortunately, VideoJS isn’t perfect with every browser out there. But the html5media project has found a way to work around those browser issues and support any video file type on any platform. And it actually works really well!

The Bottom Line

Hey there, fellow web developers! I’ve got some nifty fallback methods to share with you that will definitely come in handy. Building websites that work well across different software specifications can be a real challenge, especially when dealing with CSS and JavaScript.

But guess what? It looks like we’re heading towards a more supportive era in web design! Never before have we had so many browsers and web standards working together, especially with CSS3 & HTML5. These techniques I’m about to share are just a few of the many options available to us when building web pages that meet the standards. As a web developer, it’s always important to keep up with the latest design trends and make adjustments to best cater to our audience.