Mac CSS 에디터 리뷰

CSS 파일을 만들고 편집할 수 있는 아주 좋은 소프트웨어가 있습니다. 저는 주로 Mac 사용자이기 때문에 이 리뷰는 Mac에 초점을 맞추고 있습니다. 하지만 공유할 것이 있다면 Windows CSS 편집기에 대해 듣고 싶습니다. 결국, 그것은 그 일에 가장 적합한 도구이다.

자일 스코프

교양강령에서 19.95달러에 구입하실 수 있습니다.

Xyle Scope는 완전히 시각적인 CSS 편집기의 접근 방식을 취합니다. 기본적으로 페이지에서 요소를 선택할 수 있는 웹 브라우저입니다. 창의 사이드바는 "드릴다운"하여 선택한 요소의 HTML과 CSS를 표시합니다. 즉시 편집할 수 있으며 효과를 확인할 수 있습니다. 이 기능은 매우 강력하며 고리형 레이아웃 문제를 해결하는 데 유용한 도구입니다. 사실, Xyle Scope는 빠른 문제 해결을 위한 저의 유용한 도구가 되었습니다.

Xyle Scope는 몇 가지 약점을 가지고 있다. 한 예로, 이것은 실제로 "CSS 편집기"가 아닙니다. 기존의 "코드 보기"는 없으며, 로컬 사이트가 아닌 사이트에서 편집한 CSS를 저장할 수도 없습니다. 이것은 완전히 부풀려진 편집기보다 훨씬 더 문제 촬영 도구가 되게 한다. 나는 그것이 일종의 의도라고 생각한다, 그래서 "Scope". 또 다른 약점은 웹 렌더링에 관한 한 기본적으로 사파리라는 것이다. 따라서 문제 해결은 기본적으로 이미 승인된 브라우저로 제한됩니다. 변경한 다음 다른 브라우저에서 "미리 보기"를 한다고 해도 이러한 변경 사항이 유지되지 않으므로 의미가 없습니다.

CSS 편집

맥래빗 스토어에서 29.95달러에 구입할 수 있습니다.

CSS Edit의 가장 큰 강점은 진정한 기능의 풍부한 CSS 편집 강자라는 것입니다. 편집 창은 모든 선택기의 왼쪽 사이드바, "코드" 보기의 가운데 창 및 매우 사용하기 쉬운 클릭 버튼 스타일 편집기의 오른쪽 사이드바를 특징으로 합니다.

이 모든 것을 단일 편집기 창에 결합하는 것은 훌륭한 움직임입니다. 코드에 실제로 어떤 영향을 미치는지 알 수 없다면 단순화된 편집자는 별로 좋아하지 않습니다.

CSS Edit는 내장된 코드 검증, 쉬운 주석 달기, 선택기의 "그룹화", 검색 및 마일스톤 관리와 같은 멋진 기능을 절대적으로 로드합니다. 하지만 제 생각에 CSS Edit를 위대하게 만드는 것은 두 가지 큰 특징입니다. 재정의하고 압축을 풉니다.

재정의 기능을 사용하면 웹 페이지로 이동하여 해당 사이트에서 바로 CSS를 사용하여 효과를 볼 수 있습니다. 이것은 당신의 사이트를 수정하고 당신의 사이트를 더 좋게 보이게 하는 방법을 찾거나, 그들의 방법을 이해하고 조정하기 위해 다른 사람들의 사이트에서 사용되는 데 유용할 수 있다. 재정의는 "특공대로 이동"하지 않고도 동적 콘텐츠에 영향을 미치는 CSS를 편집하고 변경할 수 있기 때문에 특히 강력합니다.

추출도 비슷합니다. 말그대로 인터넷 상의 어느 페이지에서나 CSS를 추출할 수 있습니다. 그런 다음 저장하여 원하는 대로 사용할 수 있습니다. 생각만 해도 좀 웃겨요. 저작권 위반이 될 수 있는 것처럼 느껴지지만, 저는 그것과 함께 이미지를 훔치지 않는 한 그렇게 할 수 없다고 생각합니다. 이것은 다른 사람들의 기술을 분리해서 여러분 자신의 사이트에 적용할 수 있는 환상적인 방법입니다. 다른 어떤 소프트웨어도 CSS를 그렇게 쉽게 "추출"할 수 없습니다.

CSS Edit의 가장 큰 약점은 기능이 풍부한 CSS 편집 강국이라는 것이다. 만약 여러분이 이미 무엇을 하고 있는지 알고 있다면, 때때로 크고 무거운 애플리케이션은 여러분이 원하는 것이 아닙니다. 개인적으로, CSS Edit는 저에게 너무 벅차고, 저는 그것을 발췌, 진짜 외국 CSS에 대해 알아가는 것, 그리고 때로는 그냥 재미로 =)에만 사용합니다.

파이어폭스 포함/파이어버그

Joe Hewitt의 무료 제공.

파이어버그는 독립적인 소프트웨어가 아니라 파이어폭스 확장입니다. 브라우저 창의 아래쪽 표시줄에 기본적으로 두 상태 중 하나에 작은 아이콘을 설치합니다. 보고 있는 페이지의 모양이 양호한 경우 녹색 체크 표시, 사이트에 문제가 있는 경우 빨간색 X 표시. 아이콘을 클릭하면 편집기 영역이 열립니다.

파이어폭스 확장 기능으로는 파이어버그가 매우 강력합니다. 이전 프로그램 중 하나와 마찬가지로 페이지 요소를 마우스로 가리키고 HTML 및 CSS를 볼 수 있는 "검사" 모드로 전환할 수 있습니다. CSS 또는 HTML을 즉시 편집하여 페이지의 효과를 볼 수 있습니다. 섹션을 열고 닫을 작은 화살표가 있는 드릴다운 형식 또는 그대로 코드를 볼 수 있습니다. 요소의 간격띄우기, 여백, 테두리, 패딩 및 크기를 볼 수 있도록 "레이아웃" 모드로 CSS를 볼 수도 있습니다. 나는 파이어버그가 놀랍도록 강력하고 편리하다고 생각한다. 왜냐하면 당신은 웹브라우저를 떠날 필요도 없기 때문이다.

파이어버그는 자일 스코프의 약점을 공유한다. 파이어폭스에서만 실행되기 때문에 미리 보기 용량이 제한됩니다. 수정한 내용을 저장할 수 없습니다. 이러한 이유로 파이어버그는 실제 편집기라기보다는 문제 해결 도구입니다. 그러나 DOM 분석과 같은 파이어버그의 추가 기능 때문에 자바스크립트 오류와 유효성 검사 파이어버그는 내가 선택한 문제 해결 도구이다.

코다

코다는 패닉에서 79달러에 구입할 수 있다.

내 생각에 코다는 이 블록의 새로운 아이이고 웹 개발의 큰 아버지이다. 코다에는 CSS Edit와 마찬가지로 선택 영역과 편집할 클릭 버튼 영역이 내장된 CSS 편집기가 있습니다. 코드를 동시에 볼 수 있는 분할 보기는 없지만 CSS 보기와 편집 보기 사이를 왔다 갔다 하는 것은 매우 쉽습니다.

코다는 Mac-favorite 텍스트 편집기 TextMate처럼 코드 하이라이트가 좋습니다. 또한 변경 결과를 즉시 확인할 수 있도록 미리 보기 영역이 내장되어 있습니다. 제가 선호하는 CSS 편집 기술은 일반 텍스트 편집기에서 코드를 보고 편집한 후 저장하고 변경 사항을 확인하는 것이기 때문에 이 편집 기술은 매우 적합합니다. 하지만 코다를 빛나게 하는 것은 코다가 하는 다른 모든 것들이다. 시각적으로 매우 매력적인 방식으로 사이트를 저장할 수 있는 놀라운 FTP 클라이언트입니다. 분할 뷰 FTP/Edit Window는 천재적이며 웹 개발의 미래입니다. 단말 프로그램을 내장하여 서버에 셸 액세스를 할 수 있습니다. 마지막으로, 빠른 검색을 위해 HTML, CSS, 자바스크립트 및 PHP에 대한 참조 매뉴얼이 내장되어 있습니다.

코다는 놀라울 정도로 적응하고 적응할 수 있도록 아름답게 설계되었습니다. 이러한 이유로 코다는 제가 코딩 시간의 90%를 보내는 곳입니다. 이 홈런 제품을 위해 패닉을 응원합니다.