← Rudi kwenye Vipengele
Free

Mkaguzi wa CSS

Mkaguzi wa CSS ni zana yenye nguvu na ya bure kwa watengenezaji inayokuruhusu kupitisha kishale juu ya kipengele chochote kwenye ukurasa wa wavuti na kuona mara moja sifa zake za CSS zilizokokotolewa.

Iwe unarekebisha tatizo la mpangilio (layout), unachambua muundo wa ubunifu unaoupenda ili kujifunza jinsi ulivyotengenezwa, au unataka tu kuangalia haraka thamani za nafasi na uandishi (typography), CSS Inspector inakupa kila kitu unachohitaji katika paneli safi na inayoelea. Tofauti na DevTools za kivinjari, haikusumbui — hakuna paneli zinazoshikamana pembeni, hakuna kupunguzwa kwa nafasi ya skrini (viewport). Weka tu kishale juu ya kipengele, bofya, na kagua. Zana hii inaonyesha computed styles (mitindo halisi inayotolewa na kivinjari), si tu CSS iliyoandikwa. Hii ina maana unaona thamani halisi baada ya inheritance, specificity, na cascading kuhesabiwa — thamani zilezile zinazoathiri kile watumiaji wanachokiona kwenye skrini.

Kukagua kipengele hakusababishi kamwe reflow au repaint ya ukurasa wenyewe, hivyo unaweza kuchunguza kwa uhuru bila kuwa na wasiwasi wa kuvuruga nafasi ya kusogeza (scroll), michoro-hai (animations), au hali ya JavaScript. Pseudo-elements kama ::before na ::after zinasaidiwa pia — weka kishale juu ya mzazi (parent) na paneli itaonyesha mitindo ya maudhui yaliyotengenezwa (generated content) tofauti na ya kipengele chenyewe. CSS custom properties (variables) zinahesabiwa hadi thamani yake ya mwisho, lakini paneli pia inakuonyesha jina la variable lililozalisha thamani hiyo, hivyo unaweza kufuatilia rangi au thamani ya nafasi hadi chanzo chake cha design-token badala ya kuona tu namba ghafi ya pixel.

Katika matumizi ya kila siku, watengenezaji wengi hutumia CSS Inspector mara nyingi ndani ya kikao kimoja — kuangalia kwa nini margin imeporomoka (collapsed), kuthibitisha hex code kabla ya kuinakili kwenye stylesheet, au kuhakikisha kuwa media query breakpoint imetumika kikamilifu kwa mitindo iliyokusudiwa. Kwa sababu ni paneli inayoelea badala ya hali inayochukua kivinjari kizima, unaweza kuiacha ikiwa wazi wakati unabadilisha tabo kuangalia code editor yako mwenyewe au faili la ubunifu, kisha kurudi moja kwa moja kwenye kipengele kilekile bila kupoteza mahali ulipokuwa.

Uhakiki wa Moja kwa Moja
example.com/landing-page CSS Inspector: WASHA
Pitisha kishale juu ya kipengele chochote ili kukagua CSS yake
Jisajili Sasa
button.cta-primary
180 × 48 top: 312px · left: 40px
Sifa za CSS Imefungwa
<button> .cta-primary
MFANO WA SANDUKU
margin: 0
padding: 12 24
180 × 48
Uandishi wa herufi
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Mpangilio na Nafasi
displayinline-flex
padding12px 24px
border-radius8px
Muonekano
background#7c3aed
cursorpointer
transitionall 0.2s ease
Nakili CSS Zote Hariri
Vipengele Muhimu

Onyesho la Sifa la Muda Halisi

Ona fonti, saizi, rangi, nafasi na mengineyo papo hapo unapoelekeza kipanya juu ya kipengele chochote.

Bofya ili Kufungia

Bofya kwenye kipengele ili kufunga dokezi ili isipotee, ikiruhusu ukaguzi wa kina.

Uhariri wa Mtindo Moja kwa Moja

Bofya mara mbili kwenye thamani ili kuzibadilisha moja kwa moja. Masahihisho yako yanaonekana papo hapo kwenye ukurasa.

Nakili kwa Mbofyo Mmoja

Nakili sifa binafsi au kitalu chote cha mitindo ya usanifu kwenye ubao wako wa kunakili kwa mbofyo mmoja.

Taswira ya Mfano wa Sanduku

Ona pambizo, mipaka na thamani za padding kwa macho.

Saizi na Nafasi ya Kipengele

Huonyesha upana, urefu na nafasi ya kipengele kwenye ukurasa.

Unachoweza Kukagua

CSS Inspector inaonyesha sifa zaidi ya 40:

Uandishi wa herufi

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-transform
  • color

Mfano wa Sanduku

  • width
  • height
  • padding
  • margin
  • border
  • border-radius
  • box-sizing

Mpangilio

  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • overflow

Usuli

  • background-color
  • background-image
  • background-size
  • background-position

Athari

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Matumizi ya Kawaida

Kutatua Matatizo ya Mpangilio

Kagua vipengele ambavyo havijatengenezwa vizuri kwa usahihi.

Jifunze kutoka kwa Miundo Iliyopo

Soma mitindo ya tovuti zako unazozipenda.

Majaribio ya Haraka ya Usanifu

Jaribu mabadiliko kabla ya kuandika nambari.

Mapitio ya Wateja

Onyesha mabadiliko ya moja kwa moja wakati wa mikutano.

Uchukuaji wa Mtindo

Pata nambari ya CSS kwa vipengele vipya kwa urahisi.

Jinsi ya Kutumia
1

Washa CSS Inspector

Bofya aikoni ya CSS Inspector kwenye upau wa zana wa DevSuite Pro.

2

Elekeza ili Kukagua

Hamisha kielekezi chako juu ya kipengele chochote ili kuona sifa zake.

3

Bofya ili Kufungia

Bofya kwenye kipengele ili kubandika dokezi.

4

Hariri Mitindo

Bofya mara mbili kwenye thamani ili kuzirekebisha.

5

Nakili na Utumie

Nakili nambari iliyosasishwa na uitumie kwenye mradi wako.

Uko Tayari Kujaribu?

Sakinisha DevSuite Pro bila malipo na ufungue zana 64+ za wasanidi kwa kivinjari chako.

Ongeza kwenye Chrome Ongeza kwa Edge Ongeza kwenye FireFox