Aperture CSS bởi AdvanSoft

Aperture CSS is a CSS inspector and editor that lives on the page rather than
in a docked drawer. Turn it on, point at anything, and you get a floating,
resizable panel and a tool ring that follows your pointer.

Every numeric value can be dragged. The cascade shows every rule that applies
and strikes through the declarations that lost. Everything you change collects
into a diff you can read, copy and export, instead of vanishing the moment you
reload.

SIX TABS

• Styles — the element's own declarations, with a purpose-built control for
  each kind of value: colour pickers, box-model handles, length fields with
  unit chips, easing curves, alignment grids, gradient stops. No text box
  where a real control would do.
• Cascade — every rule that applies, grouped by stylesheet, with overridden
  declarations struck through, specificity shown and dead rules called out.
• Tree — the document as a searchable tree. Click to select.
• Page — the page as a whole: the colours it paints, the fonts it loads and
  the stacks they sit in, every image, icon and background it uses.
• HTML — the element as markup. Its tag, its attributes, its contents.
• Changes — everything you have edited on this page, as a list and as a diff.

ON THE ELEMENT, NOT ONLY IN THE PANEL

The box model is editable where the element is: drag its margin, its padding,
its border. So is a gradient — its stops, its angle, its centre — on the
element it paints. Measure between any two elements with a keystroke, and
resize the page to a device without leaving it.

FREE

Free covers inspecting and understanding a page, completely. There is no
padlock on a tab you can open and no dialog before your first edit:

• Live editing of any property, with drag-to-scrub on every numeric value
• The full cascade: every rule that applies, the stylesheet it came from, its
  specificity, and which of its declarations lost
• The box model, editable on the element itself
• The DOM tree, forcing :hover, :focus and :active, and pinning one element
• The colour picker, the page's palette, its fonts and its assets
• Copying CSS, and the keyboard shortcuts

Free edits are real edits. They live in memory, so a reload clears them — and
the panel says so the whole time it is open.

PRO — one payment, three devices

• Changes that keep: the edit ledger, a reviewable diff, saving changes across
  reloads, and exporting them as CSS or as a patch
• Editing a whole rule as text, with highlighting
• Value builders: gradients, filters, transforms, stacked shadows, layered
  backgrounds, and adding a declaration that was never there
• Colour and type: tonal ramps, variable-font axes, fluid clamp() values, and
  trying any Google Font on the page
• Motion: scrubbing a running animation, drawing an easing curve, editing
  keyframes, and catching transitions as they fire
• Tools that take over the page: measuring, responsive resizing, docking the
  panel beside the page, pinning several elements to compare, and inspecting
  inside iframes
• Why one property has the value it has: the rule that set it and everything
  that rule beat, for that declaration alone
• Markup: rewriting an element, adding one beside or inside it, removing one
• Page-wide: downloading one asset or all of them, taking the palette or the
  type away as CSS, JSON or a swatch file, the contrast and CSS audit,
  grouping the palette by what each colour paints, and highlighting everywhere
  a value is used

Every Pro control stays visible, readable and copyable, with one line saying
what it would do. Nothing appears and then greys out mid-gesture.

HOW TO TURN IT ON

• The toolbar button
• Right-click a page and choose "Inspect with Aperture CSS"
• Alt+Shift+C, which you can rebind from your browser's extension shortcuts

PRIVACY

Nothing about the pages you inspect leaves your browser. There is no
analytics. The only request the extension ever makes is the licence key you
type in yourself, sent once to check it.

ACTIVATING PRO

Buy a licence at https://aperturecss.com, then paste the key into the Licence
section of the toolbar popup. One licence covers three devices; free a seat
from the same screen. Pro re-checks about once a day and keeps working offline
for up to seven days between checks.