Välkommen till en tidig version av Brackets, en ny open-source editor för nästa generation av webben. Vi är hängivna anhängare av webbstandarder och vill bygga bättre verktyg för JavaScript, HTML och CSS samt relaterade öppna webbteknologier. Detta är vårt första ödmjuka steg.
Brackets är en annan typ av editor. En anmärkningsvärd skillnad är att denna editor är skriven i JavaScript, HTML och CSS. Detta innebär att de flesta som använder Brackets har kunskapen som krävs för att förändra och förbättra editorn. Faktum är att vi använder Brackets varje dag, för att bygga Brackets. Det har också ett antal unika funktioner som Quick Edit, Live Preview och och ytterligare några som du inte hittar i andra editorer. Läs vidare för att lära dig mer om dessa funktioner.
Du behöver inte längre tappa sammanhanget när du flyttar mellan olika dokument. När du redigerar HTML kan du använda kortkommandot Cmd/Ctrl + E för att öppna en inline-editor som visar all relaterad CSS. Gör förändringen i din CSS, tryck på ESC och du är tillbaka i HTML. Du kan också lämna CSS-reglerna öppna och göra dem till en del av din HTML-editor. Om du trycker på ESC utanför en inline-editor döljs samtliga.
Vill du se hur det fungerar? Placera markören på -elementet ovan och tryck Cmd/Ctrl + E. Då visas CSS quick editorn ovan. Till höger kan du se en lista över alla CSS-regler som är relaterade till detta element. Det fungerar även på klass och ID-attribut. Du kan skapa nya regler på samma sätt. Klicka på en av -taggarna ovan och tryck Cmd/Ctrl + E. Just nu finns det inga regler men genom att klicka på knappen Ny regel skapar du en ny stilregel för -taggar.
Samma kortkommandon kan användas även på andra saker, till exempel funktioner i JavaScript för att ändra
färger, tidsfunktioner för animering och nya saker läggs till hela tiden!
Just nu kan inte inline-editorer nästlas så du kan bara använda Quick Edit från den "fullstora" editorn.
Du vet den där "spara och ladda om"-proceduren vi använt oss av i flera år? Den där du gör en ändring i din editor, sparar, går till webbläsaren och laddar om för att se resultatet? Med Brackets behöver du inte göra det.
Brackets öppnar en direktlänk till din lokala webbläsare och skjuter ut dina HTML- och CSS-ändringar medan du skriver! Du kanske redan använder något liknande webbläsarverktyg men med Brackets behöver du inte kopiera och klistra in koden fram och tillbaka mellan webbläsare och editor. Din kod körs i webbläsaren men skrivs i din editor!
Brackets gör det enkelt att se hur dina HTML- och CSS-ändringar kommer att påverka sidan. När din markör står på en CSS-regel markerar Brackets samtliga berörda element i webbläsaren. På samma sätt markerar Brackets respektive element i webbläsaren när du redigerar HTML-koden.
Om du har Google Chrome installerat kan du prova denna funktion själv. Klicka på blixtikonen i det övre högra hörnet i ditt Brackets-fönster eller använd kortkommandot Cmd/Ctrl + Alt + P. När Live Preview är aktiverat i ett HTML-dokument kommer alla länkade CSS-dokument att kunna redigeras i realtid. Ikonens färg kommer att byta färg från grå till guld när Brackets lyckats skapa en länk till din webbläsare. Om du sedan placerar markören på -taggen ovan ser du hur en blå markeringen visas runt bilden i Chrome. Du kan sedan använda Cmd/Ctrl + E för att visa de relaterade CSS-reglerna. Prova att ändra tjockleken på border-egenskapen från 10px till 20px eller att ändra backgrundsfärgen från "transparent" till "hotpink". Om Brackets och din webbläsare körs sida vid sida kommer du att se dina ändringar genomföras direkt i webbläsaren. Coolt va?För tillfället stöder Brackets bara Live Preview för HTML och CSS. Dock laddas webbläsaren automatiskt när du sparar HTML- eller JavaScript-dokument. Vi jobbar för fullt med att utveckla stöd för Live Preview även för JavaScript. Live preview fungerar just nu bara i Google Chrome men med tiden hoppas vi kunna erbjuda denna funktionalitet i alla vanligt förekommande webbläsare.
För de av oss som fortfarande inte memorerat färgkoderna för HEX eller RGB gör Brackets det snabbt och enkelt att se vilken färg som används. När du pekar på ett färgvärde eller gradient, i antingen HTML eller CSS, visas en förhandsgranskning av färgen/gradienten automatiskt. Detsamma gäller bilder: peka på bildens sökväg i Brackets så visas en tumnagelversion av bilden.
Du kan prova Quick View själv genom att placera markören på -taggen i början av detta dokument och trycka Cmd/Ctrl + E för att öppna snabbeditorn för CSS. När du pekar över ett färgvärde i CSS-koden visas motsvarande färg. Du kan utnyttja samma funktion med gradients i snabbeditorn - placera markören på -taggen och peka på dess background-image-egenskap. Du kan också prova förhandvisningen av bilder genom att placera markören vid skärmdumpen tidigare i detta dokument.Utöver alla bra funktioner som är inbyggda i Brackets har vårt stora, och växande, community av tilläggsutvecklare tagit fram mer än hundra tillägg som ger mer användar funktionalitet. Om du saknar någonting i Brackets är det stor chans att att någon redan byggt ett tillägg för att lösa det. För att bläddra eller söka i listan över tillgängliga tillägg går du till Arkiv > Tilläggshanteraren och klickar på fliken "Tillgängliga". När du hittat ett tillägg du vill ha klickar du bara på knappen "Installera" intill det.
Brackets är ett open-source-projekt. Webbutvecklare från hela världen bidrar för att göra Brackets till en bättre kodeditor. Många andra bygger tillägg som ökar Brackets funktionalitet. Berätta för oss vad du tycker, dina åsiker och idéer eller bidra med kod direkt till projektet.