浏览器作为设计工具 - 改变颜色，将它们保存？ [英] Browser as a Design Tool - Change colors, Save Them?

问题描述

我是一个Web开发者/设计师，我需要我的code-文盲的客户能够轻松地乱用特定元素的颜色，保存这些CSS的变化，并把它们发送给我。我会引导他们通过电话，但我仍然需要它比期望他们找到一个主题表CSS选择器更容易，写六角codeS。

I'm a web developer/designer, and I need my code-illiterate clients to be able to easily mess with the colors of particular elements, save these CSS changes, and send them to me. I'll be guiding them over the phone, but I still need it to be easier than expecting them to locate CSS selectors in a theme sheet, and write hex codes.

我需要在浏览器检查，可以让一个code-文盲个人：的

I need an in-browser inspector that can allow a code-illiterate individual to:

• 轻松地操纵在网页上的元素的颜色，具有图形用户界面颜色选择器。
  
  ＆NBSP;＆NBSP;（+）的铬做到这一点很好。这正是我想要的。的
  
  ＆NBSP;＆NBSP;（ - ）的 Firefox的华丽，否则督察似乎没有这个基本能力的


• 保存受影响的样式表，这样他们就可以将其发送给我。
  
  ＆NBSP;＆NBSP;（？）的 Firefox的样式编辑器，使节约纸张容易，但是要改变检查元素 - 奇怪 - 似乎并不适用的
  
  ＆NBSP;＆NBSP;（ - ）的 Chrome可能按说能够做到这一点，内源面板深，但似乎你必须弄明白黑客，因为我的code-有文化的一个，我还没有想通了。的

• Easily manipulate colors on a web page's elements, with a GUI color-picker.
    (+) Chrome does this perfectly. It's exactly what I want.
    (-) Firefox's otherwise gorgeous inspector seems not to have this basic capability.
• Save the affected stylesheet, so they can send it to me.
    (?) Firefox's Style Editor makes saving sheets easy, however changes to inspected elements - strangely - do not seem to be applied.
    (-) Chrome may supposedly be able to do this, deep within the Sources panel, but it seems you need to be a hacker to figure it out, because I'm the code-literate one, and I haven't yet figured it out.

我觉得这个难题的存在很莫名其妙 - 为什么浏览器厂商不屑做这样丰富的网页编辑套件，其中一个可以操纵的CSS，的但不包括基本的保存更改功能？ / EM> 我缺少的东西吗？的

I find the existence of this conundrum very baffling -- why have browser vendors bothered making such a rich web-page editing suite, where one can manipulate CSS, but not include a basic "save changes" feature? Am I missing something?

我发现，在Chrome中，人们可以自由地操纵元素与检查CSS，然后在每个规则（该规则的右上角）相关联的CSS片带你到修改后的CSS表中的源标签。 这是我要救什么。的

＆NBSP;＆NBSP;从这里，人们可以随时随地在这个修改后的源$ C ​​$ c右键单击，然后另存为 - 但奇怪的是，不幸的是，和unintuitively，铬节省的错误来源$ C ​​$ C。它保存的原始的，未经修改的源代码code 的 - 而不是修改后的源$ C ​​$ C你有右键单击保存，as'd。非常令人沮丧，我目前正在试图找到解决这个错误的方法。的我是如此接近！的

I have found, in Chrome, that one can freely manipulate an element's CSS with the inspector, then click on the CSS sheet associated with each rule (in the top-right corner of the rule) to take you to the Modified CSS Sheet in the Sources tab. This is what I want to save.
   From here, one can right-click anywhere in this modified source code, and then Save-As -- but strangely, unfortunately, and unintuitively, Chrome saves the wrong source code. It saves the original, unmodified source code -- not the modified source code you had right-click save-as'd. Very frustrating, and I'm currently trying to find a way around this bug. I'm so close!

好吧，我已经想通了。 当您保存在Chrome的源选项卡中的文件，你不只是保存该文件 - 的您实际上是设置Chrome浏览器不断将该文件自动保存在每次更改做它。的

＆NBSP;＆NBSP;这实际上是一种很酷，但很误导的。

Okay, I've figured it out. When you save a file in Chrome's Sources tab, you're not just saving that file -- you're actually setting Chrome to constantly auto-save that file upon every change you make to it.
   This is actually kind of cool, but very misleading.

所以，你保存一个CSS文件后，的每次改变您对在检查元素的CSS，将自动保存到文件中。的这仍然存在，即使重新启动浏览器。

So, after you save a CSS file, Every change you make to an element's CSS in the inspector, will auto-save to that file. This persists even if you restart the browser.

混乱起来，的，因为当你有标记为自动保存文件，然后另存为一个修改过的文件，铬古怪写入原您右键单击文件，而不是之一。的只要你做出之后任何变化，当Chrome将自动写入每个当前修改该文件。的我认为这是浏览器的错误。的

Confusion arose, because when you have a file marked for auto-saving, and you then Save-As a modified file, Chrome weirdly writes the original file, not the one you right-clicked. As soon as you make any change after that, when Chrome will auto-write every current modification to that file. I regard this to be a bug in Chrome.

课程学习，的 首先，的另存为文件。的二，的进行更改。

＆NBSP;＆NBSP; preSTO，修改后的CSS主题，等待着你在你的硬盘上。

Lesson be learned, First, Save-As the file. Second, make your changes.
   Presto, your modified CSS theme awaits you on your hard disk.

需要明确的是，的如果您保存，然后进行修改，然后再次保存 - Chrome将会有救了的原始源代码的，不您的修改后的源。这使得事情的重要的顺序。

To be clear, if you Save, then make changes, then save again -- Chrome will have saved the Original Source, not your Modified Source. This makes the order of things important.

我不知道的方式来查看当前标记为自动保存的文件列表，或者如何取消标记他们。

I do not know of a way to see a list of files currently marked for auto-saving, or how to unmark them.

推荐答案

• 确定哪些样式表，你会做出改变。 请务必只影响与此相关的样式表的规则。的


• 导航到这个样式表中的开发工具的源面板的右键单击的它，的另存为的这个文件到您的计算机。的您可以通过点击每个CSS规则的右上角的样式在元素面板所选元素得到在源面板样式表快。的


• 自由修改与您所选择和保存的样式表相关的CSS规则。 Chrome会自动保存每个更改保存在电脑上的样式表。的

How to use Chrome to play with CSS and Save it

• Determine which Stylesheet you will make changes to. Be sure to only affect rules associated with this stylesheet.
• Navigate to this stylesheet in the Sources panel of the Developer Tools, Right-click it, and Save-As this file to your computer. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.
• Freely make changes to CSS Rules associated with your chosen-and-saved stylesheet. Chrome will automatically save each change to the stylesheet you saved on your computer.

的请记住，但是，的你在这个命令必须做的事情。如果您保存样式表，然后让你的CSS的变化，的然后再保存的Chrome会奇怪写的原始未修改源的到文件的（直到你做一个更多的变化，这会导致Chrome浏览器自动保存所有修改文件）。的

Keep in mind, however, that you must do things in this order. If you save the stylesheet, then make your CSS changes, then save again, Chrome will oddly write the original unmodified source to file (until you make one more change, which causes Chrome to auto-save all changes to file).



• 设置了一个主题样式与空白（或默认-ISH）的CSS规则（即有顶级precedence）为每个元素你打算让他们一起玩。


• 在电话中，引导他们另存为从源盘内这个主题样式表。


• 引导他们在检查元素，并使用在Chrome检查的GUI颜色选择器染指四周，找到他们想要的确切颜色。


• 让他们给你保存的样式表:)
  
  这是一个好主意，你来验证修改是他们给你的文件中，在关闭浏览器窗口前：P 的


• Set up a theme stylesheet with blank (or default-ish) CSS rules (that have top precedence) for every element you intend to let them play with.
• Over the phone, guide them to Save-As this theme stylesheet from within the Sources panel.
• Guide them in inspecting elements, and using the the Chrome inspector's GUI color-picker to meddle around and find the exact colors they want.
• Have them send you the saved stylesheet :)
  It's a good idea for you to verify that the modifications are in the file they sent you, before they close their browser window :P

这篇关于浏览器作为设计工具 - 改变颜色，将它们保存？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！