DEV Community

Cover image for hate CSS? use this extension instead
Hamed Baatour
Hamed Baatour

Posted on

20 7

hate CSS? use this extension instead

let's be honest, many developers just hate working with CSS because:

  1. you have to try a lot of CSS properties values just to get something just right (aka make it pixel perfect)
  2. it's extremely repetitive!!

how many times we just write the exact same thing?

display: flex, justify-content: center...

most CSS priorities just keep repeating over and over again to create any UI

soo... I made a browser extension to visually change any website's CSS instead!

🎨   35+ CSS properties
πŸ‘Œ    customizable CSS selector
✍   integrated code editor
⚑   super lightweight - 500KB


InTab visual css edtior


πŸ“±    ∞ virtual devices + realtime sync
πŸ”Ž   clean CSS inspector on hover
πŸ•Ά   breakpoints visualizer
🌲   HTML layers tree
☒   x-ray mode


InTab virtual devices


why not devtools?

  • modifying CSS is slow and exporting changes is a pain
  • refresh the page & all the CSS changes are gone!
  • hard to inspect CSS with lots of crossed-over properties
  • constantly resizing devtools or using one device at a time to test responsiveness

so to fix all of those issues I made InTab.

πŸ‘‰πŸ» give it a shot at intab.io
πŸŽ‰ just launched this also on ProductHunt

please show some πŸ’—

Cheers!

Top comments (10)

Collapse
 
thehassantahir profile image
Hassan Tahir β€’

Crazy thing! 😍

Collapse
 
hamedbaatour profile image
Hamed Baatour β€’ β€’ Edited

Thanks Hassan, really appricate your support 😊

thanks

Collapse
 
jonaspetri profile image
Jonas Petri β€’

This is a great idea! I have seen similair extensions (like VisBug), but this looks way more intuitive. Definitely something I'm gonna check out!

Collapse
 
hamedbaatour profile image
Hamed Baatour β€’ β€’ Edited

Thanks Jonas,
yeah I did use Visbug extensivly also and although it's a great tool it's has a major limitation of not being able to export any changes.
InTab on the other hand let's you export the CSS code and it even autogenerates CSS mediaquires if you fix a UI issue in one of the included virtual devices + a lot more visual debugging tools 😎

Collapse
 
jonaspetri profile image
Jonas Petri β€’

Yeah, that’s true. And media queries sounds awesome!

Collapse
 
hamedbaatour profile image
Hamed Baatour β€’

would love to hear your feedback guys!

Collapse
 
techman09 profile image
TechMan09 β€’

When browsing in mobile safari, a video keeps popping up and auto-playing on me.

Collapse
 
hamedbaatour profile image
Hamed Baatour β€’

humm that shouldn't happen! πŸ€” which safari verison do you use please so I can fix this?

Collapse
 
techman09 profile image
TechMan09 β€’

It actually only happens in the pop-up in this app, when I actually open it in the official safari browser, it does not show up. Do you have the β€œautoplay” attribute on the video?

Thread Thread
 
hamedbaatour profile image
Hamed Baatour β€’

that's weird, will investiage the issue. maybe I have left a "playsinline" attribute somewhere...

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay