Browser Feature Detector

How Does It Actually Figure This Out?

Super simple. The second you loaded this page, it started having this rapid-fire conversation with your browser. Imagine it going something like:

App: "Hey, can you handle WebGL? The fancy 3D stuff?"
Browser: "Oh yeah, totally got that!"
App: "Cool." *slaps green badge on it*

App: "What about WebXR? VR things?"
Browser: "Uh... nope, that's not my thing."
App: "Noted." *red badge*

It all happens instantly. Nothing gets downloaded, no servers involved. Just your browser getting quizzed on what it knows how to do.

📋 Browser Information - Your Browser's ID Card

This is just the basic info about what you're using and where you're browsing from:

User Agent - Okay so this is basically your browser writing its entire resume in one massively long sentence. It's got the browser name, version number, your operating system, the rendering engine... everything. Developers look at this string to figure out what kind of browser just showed up at their website. Yeah, it's as boring as it sounds, but it's useful.

Platform - Are you on Windows? Mac? Linux? Browsing from your phone? This just tells websites what device you're on so they know how to display things properly. Nobody wants a desktop layout on their phone screen.

Language - Whatever language your browser speaks. Websites peek at this to show you content in the right language. Pretty straightforward.

Online Status - Literally just: are you connected to the internet right now or nah? Sometimes you can still browse if stuff's cached, which is why this matters.

Screen Resolution - How many pixels wide and tall your actual screen is. Got a nice 4K monitor? You'll see 3840 × 2160. Regular laptop? Probably 1920 × 1080. Bigger numbers = sharper display.

Viewport Size - This is how much space your browser window is actually taking up right now. It's usually smaller than your screen resolution because toolbars and tabs eat up space. Resize your window and watch this number change in real-time.

⚡ JavaScript APIs - The Cool Stuff Your Browser Can Do

Okay, now we're getting to the fun part. APIs are basically like special powers your browser has. They're what make websites feel like actual apps instead of just digital brochures. Let's break down what each one does in plain English:

Geolocation API - You know how Google Maps just... knows where you are? That's this thing. Websites can politely ask "hey, where are you?" and if you say yes, boom - instant directions, local weather, nearby coffee shops, whatever. Obviously they have to ask permission first, which is good because nobody wants every website knowing where they live.

Service Worker - This is like having a helpful little robot working for you behind the scenes. It's the reason you can still read your Gmail even when the Wi-Fi dies. It saves stuff locally so sites work when you're offline. Pretty clutch when you're on a plane or in a tunnel.

Web Workers - Imagine trying to cook dinner, clean the house, and help with homework all at the same time. You'd go insane, right? Web Workers are like hiring extra people to handle some tasks in the background while the main browser does other stuff. Keeps everything running smooth without freezing up.

WebSockets - This is how chat apps work without you constantly hitting refresh. It keeps a live connection open between your browser and the server, so messages pop up instantly. Gaming, stock trading, live sports updates - anything that needs to be real-time uses this.

Fetch API - The magic behind infinite scroll. Instagram, Twitter, Facebook - they all use this to grab more content as you scroll down without reloading the entire page. Makes browsing feel smooth and natural.

Promises - Think of it like ordering food. You don't just stand at the counter staring at them until your burger's ready. They give you a receipt (a "promise"), you sit down, and they bring it when it's done. Same idea for loading stuff on websites - the browser can do other things while waiting.

IndexedDB - Basically a full-on database living in your browser. Way beefier than those dinky cookies. Progressive web apps use this to store everything they need - your notes, your saved items, game progress, whatever. It's what lets apps work properly even when you're offline.

Web Crypto - Your browser's built-in security team. It scrambles your passwords and credit card info so hackers can't read it even if they somehow intercept it. This is why you want to see that little padlock icon before buying anything online.

Notifications - You know those little "ding" popups? "John messaged you on Facebook" or "Your food is almost here." They work even when you're on a completely different tab or website. Can be super helpful or super annoying - really depends on which sites you give permission to.

Vibration API - Makes your phone go buzz. Obviously only works on mobile devices. Racing games use it when you crash, messaging apps use it for incoming texts, that kind of thing. Adds tactile feedback.

Battery API - Lets websites check how much battery you've got left. Some considerate sites will actually dial back the fancy animations and HD video when they see you're at like 5%. Helps your phone last a bit longer.

Clipboard API - See those "Copy to clipboard" buttons all over the place? This is the tech making that work. One click and whatever you need is copied - no more highlighting and right-clicking like a caveman.

IntersectionObserver - This thing is actually genius. It keeps an eye on when stuff scrolls into your view. That's why modern websites don't try to load 500 images all at once anymore - they wait until you're actually about to see something before loading it. Saves a ton of bandwidth and makes pages way faster.

Web Share API - You know that familiar share menu on your phone with all your apps? This lets websites tap into that. Instead of websites making their own janky share buttons, they just open your system's share thing. Way more convenient - one tap and you can text it, email it, tweet it, whatever.

Payment Request - The "quick checkout" dream. Save your card info once, then buy stuff everywhere with like two clicks. No more typing your 16-digit card number on every site. Apple Pay and Google Pay on websites work through this.

Web Bluetooth - Okay this one's genuinely cool. Websites can now connect to your Bluetooth stuff. Change your smart light colors, check your heart rate monitor, sync your wireless headphones - all from a website in your browser. The future is weird, man.

🎨 HTML5 Features - The Building Blocks

HTML5 was a massive upgrade. Like, websites went from "here's some text and a few pictures" to "holy crap this is basically a full app." Here's the important stuff it brought:

Canvas - Think of it as a blank canvas (shocking, I know). Websites can draw literally anything on it - graphs, animations, interactive diagrams, even entire games. That chart showing your Spotify listening history? Probably Canvas. That browser game you're procrastinating with? Definitely Canvas.

Drag and Drop - Grab things and move them around, just like on your desktop. Trello cards you can drag between lists? That's this. Uploading files by dragging them into your browser window? Also this. Makes websites feel way more interactive and natural.

History API - This is why modern websites feel fast. Sites can change what's in the address bar without actually reloading the whole page. Hit the back button and boom - previous screen pops up instantly. No loading spinner, no waiting. It's what makes web apps feel like real apps.

File API - Lets websites look at files you select (they can't just browse your computer randomly, don't worry). This is why you can see a preview of your profile picture before actually uploading it. The website's reading that image file locally on your machine first to show you what it'll look like.

WebRTC - Video calls, right in your browser. No downloading Zoom or Skype or whatever - just click a link and you're in a video call. Google Meet, Discord, that sketchy "online therapy" site your friend recommended - they all use WebRTC. Kind of mind-blowing when you think about it.

Page Visibility - Your browser is a snitch. It tells websites whether you're actually looking at their tab or if you've switched to Reddit. Good websites use this power responsibly - they pause videos when you switch tabs to save your battery. Bad websites... well, they get creative with annoying you.

Fullscreen API - You know that fullscreen button on YouTube? This is what makes it work. One click and the video takes over your entire screen. Exit fullscreen, and you're back to normal. Simple but essential.

Web Components - This is more of a developer thing. It lets them build custom HTML elements with special powers, which makes creating complex websites way easier. You probably won't notice it directly, but it's why modern web apps can do so much without falling apart.

💅 CSS Features - Making Things Look Good

CSS is literally the difference between "wow this site looks amazing" and "did someone make this in 1997?" It handles all the visual stuff - layouts, colors, animations, how things move around. Here's the good stuff:

CSS Grid - The power tool for layouts. Picture an invisible spreadsheet organizing everything on a page into neat rows and columns. This is why modern websites look all organized and professional instead of like someone just threw content at a wall.

CSS Flexbox - Another layout system, but this one's great for arranging stuff in lines. Imagine organizing books on a shelf - add a new book, everything scoots over to make room. Remove one, they all shift back. That's Flexbox doing its thing automatically.

CSS Variables - Set something once (like your brand color), then use it everywhere. Later decide you want a different blue? Change it in one spot and the entire website updates instantly. Way better than hunting through files trying to replace things manually.

CSS Animations - All those smooth, satisfying movements. Buttons that gently grow when you hover over them. Menus that slide in elegantly. Loading spinners that actually spin. This is what brings websites to life and makes them feel polished instead of clunky.

CSS Transforms - Spin things around, flip them over, make them bigger or smaller, slide them to the side. Ever seen a card flip when you hover over it? That's CSS Transforms showing off.

CSS Filters - Basically Instagram filters for web elements. Blur an image, make it black and white, crank up the brightness, boost the contrast. All the visual effects you'd want, built right in.

CSS Backdrop Filter - That trendy frosted glass effect you see everywhere now. Things are slightly see-through but the background behind them is blurred. Apple uses it constantly, and now every modern website wants in on the look.

CSS Container Queries - The next evolution of responsive design. Instead of everything caring about your whole screen size, elements can respond to whatever container they're sitting in. Makes building flexible layouts way easier, especially when you've got sidebars and widgets and stuff.

CSS Aspect Ratio - Keeps videos and images from looking weird when you resize things. It locks them to the right proportions (like 16:9 for widescreen) so nothing gets stretched tall and skinny or squashed flat. Your photos actually look how they're supposed to.

🎬 Media & Graphics - The Multimedia Playground

All the audio, video, and fancy graphics stuff. This is what makes the web feel like a full-on media platform.

WebGL - 3D graphics right in your browser. Google Maps' 3D buildings? Browser-based games? Complex data visualizations that you can spin around? That's all WebGL flexing its muscles.

WebGL2 - The beefed-up version. Same thing as WebGL but faster and better at handling really complex 3D scenes. More polygons, better effects, smoother performance.

Web Audio API - Way beyond just playing MP3s. This thing can generate sounds from scratch, mix tracks, add effects, analyze frequencies - basically a full music production studio in your browser.

Media Source Extensions - The tech behind smooth video streaming. It's why Netflix can start you at potato quality when your internet sucks, then smoothly bump up to HD when things improve. All automatic, no buffering.

Picture-in-Picture - Pop a video out into a little floating window. Keep watching YouTube while you browse Reddit or work on something else. Super handy for multitasking.

Screen Capture - Websites can record your screen (they gotta ask permission first). This is what powers Loom recordings and screen sharing in Zoom or Google Meet.

Media Recorder - Record audio or video straight from the browser. Voice messages, webcam recordings, all that stuff without needing a separate app.

Web Speech API - Websites can talk to you (text-to-speech) or listen to you (speech recognition). Pretty sci-fi when you think about it. "Hey browser, read this article to me."

WebXR - VR and AR right in your browser. No need to download VR apps - just click a link and you're in a virtual world. Still pretty new, but the future's looking wild.

💾 Storage & Data - Where Websites Keep Their Stuff

Websites need to remember things about you - your settings, your cart, your game progress. Here's where they stash all that info.

Local Storage - The basic storage locker. Websites save simple stuff here - your dark mode preference, items in your shopping cart, that sort of thing. It sticks around forever unless you manually clear your browser data.

Session Storage - Same idea as Local Storage, but with amnesia. Close the tab and poof - everything's gone. Good for temporary stuff you only need during one browsing session.

IndexedDB - Now we're talking serious storage. This is a full database living in your browser. Web apps use this to store tons of data so they can work offline with all your stuff still there.

Cookies - The dinosaurs of web storage. Been around forever. Those tiny files websites use to remember you're logged in. Everyone complains about them but they're actually super useful.

Cache API - Saves copies of website files so the page loads lightning-fast next time you visit. Why some sites load instantly while others take forever.

File System Access - Wild stuff. Websites can actually read and save files on your computer now (with your permission). Web apps are getting scary close to desktop app levels of power.

Persistent Storage - Tells the browser "yo, this data is important, don't delete it even if you're running out of space." Important for apps that absolutely can't lose your data.

🌐 Network & Connectivity - Talking to the Internet

How your browser stays connected and communicates with the wider world.

Online/Offline Events - Your browser knows when you lose Wi-Fi. That's why apps can show you "You're offline" messages and then automatically sync everything when you reconnect. Pretty smart.

Network Information - Tells websites what kind of connection you've got. Blazing-fast fiber? Crappy 3G? Smart sites will serve you smaller images and lower-quality video when your connection sucks.

Beacon API - Sneaky little thing that makes sure data gets sent even when you're rage-quitting a tab. Mostly used for analytics. You close the tab, the data still makes it to the server.

Server-Sent Events - One-way updates from server to browser. Perfect for stuff that needs to update constantly but you don't need to send anything back - news feeds, sports scores, stock prices.

WebTransport - The new hotness for real-time communication. Faster than WebSockets, which makes it perfect for games and live streaming where every millisecond counts.

🔒 Security & Privacy - Keeping You Safe

The stuff that protects you from the sketchy parts of the internet.

HTTPS Protocol - That little padlock in your address bar. Means everything between you and the website is encrypted. Nobody in between - not your ISP, not some hacker at the coffee shop - can see what you're doing.

Secure Context - Just means the page loaded over HTTPS. A lot of powerful features won't even work without this because they're too risky on unsecured connections.

Content Security Policy - Security rules that stop bad stuff from running. It's like a bouncer that blocks hackers from sneaking malicious code onto websites. Extra layer of protection.

SubResource Integrity - Makes sure files loaded from other servers haven't been messed with. If a hacker tries to swap out a file with a compromised version, this catches it.

Permissions API - Manages all those "Allow camera?" "Allow location?" popups. Keeps track of what permissions you've given to which sites. Central control for all that stuff.

Credential Management - Works with your password manager to handle logins smoothly and securely. Makes signing in easier without compromising security.

📱 Device & Sensors - Getting Physical

Features that tap into your device's actual hardware - the gyroscope, accelerometer, touchscreen, all that jazz.

Touch Events - Taps, swipes, pinches, all the touchscreen gestures. Without this, websites would be totally unusable on phones and tablets. Pretty much essential for mobile web.

Pointer Events - A unified way to handle mouse, touch, and stylus input all at once. Whether you're clicking, tapping, or using a pen, websites can handle it the same way.

Device Orientation - Knows which way you're tilting your phone. That racing game where you steer by tilting? Maps that show which direction you're facing? This is the sensor making it happen.

Device Motion - Detects when you're shaking or moving your device. Fitness apps that count your steps, games that respond to motion - this is what powers all that.

Screen Orientation - Portrait or landscape? Your browser knows and tells websites so they can adjust their layout. Flip your phone, the site reorganizes itself.

Wake Lock - Keeps your screen awake. Super handy for recipe sites (so the screen doesn't turn off while you're cooking) or workout apps. No more having to tap the screen with floury fingers.

So Why Does Any of This Matter?

Look, here's the deal - not all browsers are the same. Safari does things differently than Chrome. That ancient Internet Explorer your workplace forces you to use? Yeah, it's missing like half of these features. Firefox, Edge, Brave - they're all playing by slightly different rules.

If you're just browsing casually, this is mostly just interesting trivia. Cool to see what your browser's capable of. You might be genuinely surprised at how much power modern browsers pack. Or disappointed if you're stuck on old hardware.

But if you're building websites? This stuff is absolutely critical. You need to know what features are actually safe to use. What's the point of coding something fancy with WebXR if most of your users can't even run it? You're just wasting time.

The web moves fast too. Like, really fast. New stuff gets added constantly. What's cutting-edge today becomes standard next year, and eventually gets replaced by something even better. This app is basically a snapshot of where things stand right now with your specific browser.

Think of it this way - you wouldn't try to play a PS5 game on a PS2, right? Same concept here. You gotta know what hardware (or in this case, software) you're working with before you can use it properly.

Whether you're just nerding out or actually building stuff for the web, now you've got a clear picture of what you're dealing with. Not bad for a quick browser test, eh?