Linijka strony dodaje linijki w stylu Photoshopa i przeciągalne linie prowadnice do dowolnej strony. Pikselowo dokładne linijki biegną wzdłuż górnej i lewej krawędzi viewportu, a ty możesz przeciągać linie prowadnice na stronę, aby mierzyć odległości, sprawdzać wyrównanie i weryfikować odstępy — wszystko bezpośrednio na żywej stronie.
Projektanci pracujący w Figmie lub Photoshopie polegają na linijkach i prowadnicach, aby sprawdzać odstępy i wyrównanie. Ale gdy te projekty są implementowane w HTML/CSS, weryfikacja dokładności pikselowej zwykle oznacza otwarcie DevTools, najeżdżanie na elementy jeden po drugim i porównywanie obliczonych wartości z makietą. Linijka strony wnosi znany przepływ pracy linijek i prowadnic bezpośrednio do przeglądarki. Pozioma linijka ze znacznikami rozciąga się na górze viewportu, a pionowa linijka na lewej krawędzi — obie pokazują pozycje pikselowe. Kliknij i przeciągnij z dowolnej linijki, aby wyciągnąć linię prowadnicy na stronę. Prowadnice są kolorowo kodowane (niebieskie dla poziomych, czerwone dla pionowych) i pokazują swoją pozycję pikselową. Odległość między dwiema równoległymi prowadnicami jest automatycznie obliczana i wyświetlana. Przeciągnij prowadnice, aby je przestawić, lub kliknij dwukrotnie, aby usunąć. Cała nakładka jest nieinwazyjna — siedzi na stronie bez wpływu na układ czy interakcje.
Precyzyjne linijki ze znacznikami co 50 pikseli biegną wzdłuż górnej i lewej krawędzi viewportu. Linijki przewijają się ze stroną i pokazują dokładne pozycje pikselowe względem początku strony (0,0). Znaczniki co 10px z etykietami co 50px.
Kliknij i przeciągnij z poziomej linijki, aby utworzyć poziomą prowadnicę, lub z pionowej linijki dla prowadnicy pionowej. Prowadnice przyciągają do pozycji kursora i pokazują swoje dokładne współrzędne pikselowe (np. y: 200px). Przeciągnij, aby przestawić, kliknij dwukrotnie, aby usunąć.
Gdy dwie równoległe prowadnice są umieszczone, odległość pikselowa między nimi jest automatycznie obliczana i wyświetlana z łączącą klamrą i etykietą. Umieść dwie poziome prowadnice w odległości 120px i zobacz "120px" oznaczone między nimi.
Poziome prowadnice są niebieskie, pionowe prowadnice są czerwone — ułatwia to ich rozróżnienie jednym spojrzeniem, gdy umieszczono wiele prowadnic. Każda prowadnica pokazuje swoją pozycję w małym znaczku etykiety.
Linijki i prowadnice są renderowane jako przezroczysta nakładka, która nie wpływa na DOM strony, układ ani JavaScript. Nadal możesz klikać przez nią, aby wchodzić w interakcje z elementami strony. Nakładka przechwytuje tylko kliknięcia na linijkach i uchwytach prowadnic.
Umieść tyle prowadnic, ile potrzebujesz — bez limitu. Utwórz kompletną siatkę pomiarową z poziomymi i pionowymi prowadnicami oznaczającymi każdy znaczący punkt wyrównania na stronie.
Makieta mówi, że nagłówek ma 80px wysokości, a zawartość zaczyna się 120px od góry. Umieść poziome prowadnice w tych pozycjach i natychmiast zweryfikuj, czy wdrożona strona odpowiada specyfikacjom projektowym.
Umieść prowadnice na górze i na dole powtarzających się elementów (karty, elementy listy, sekcje), aby zweryfikować, że wszystkie mają identyczne odstępy. Niespójne przerwy między elementami stają się natychmiast oczywiste.
Umieść pionową prowadnicę na lewej krawędzi nagłówka, a następnie sprawdź, czy tekst akapitu, przyciski i obrazy poniżej wyrównują się do tej samej linii. Niedopasowania nawet o kilka pikseli są widoczne względem prowadnicy.
Umieść dwie pionowe prowadnice na lewej i prawej krawędzi elementu, aby zmierzyć jego szerokość. Umieść dwie poziome prowadnice dla wysokości. Automatycznie obliczona odległość daje dokładne wymiary pikselowe.
Umieść pionową prowadnicę przy powszechnych szerokościach punktów przerwania (768px, 1024px, 1280px) i zmień rozmiar przeglądarki, aby sprawdzić, czy elementy poprawnie przepływają przy każdym punkcie przerwania. Prowadnice pozostają stałe jako punkty odniesienia wizualnego.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Linijki strony. Pikselowo dokładne linijki pojawiają się wzdłuż górnej i lewej krawędzi viewportu.
Kliknij i przeciągnij z górnej linijki, aby umieścić poziomą linię prowadnicy, lub z lewej linijki dla prowadnicy pionowej. Prowadnica podąża za kursorem i przyciąga do pozycji pikselowej, w której ją zwolnisz.
Każda prowadnica pokazuje swoją pozycję pikselową (np. y: 200px). Gdy umieszczono dwie równoległe prowadnice, odległość między nimi jest automatycznie wyświetlana z oznaczoną klamrą.
Przeciągnij dowolną prowadnicę, aby przenieść ją do nowej pozycji — etykiety odległości aktualizują się w czasie rzeczywistym. Kliknij dwukrotnie prowadnicę, aby usunąć ją ze strony.
Kliknij ponownie ikonę Linijki strony, aby ukryć wszystkie linijki i prowadnice. Pozycje prowadnic są zachowane, jeśli aktywujesz ponownie podczas tej samej sesji.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
