本文共 8902 字，大约阅读时间需要 29 分钟。
dev.c++游戏代码
A little over a week ago you may have seen us – a partnership with our friends at . CSS battles are a relatively new concept – the site launched in April – and it’s not always immediately obvious how they work.
一周前，您可能已经看到我们 -与上的朋友们建立了伙伴关系。 CSS之战是一个相对较新的概念-该网站于4月启动-并非总是显而易见的。
The default output and editor panels in CSSbattle.
CSSbattle中的默认输出和编辑器面板。
In simple terms:
简单来说：
- Your objective is to create a copy of the ‘target’ image using only HTML & CSS 您的目标是仅使用HTML和CSS创建“目标”图像的副本
- You can’t use external images 您不能使用外部图像
- You can’t use SVG (even inline SVG) or special characters 您不能使用SVG(甚至是嵌入式SVG)或特殊字符
- All solutions are automatically scored for both accuracy and efficiency (character count) 所有解决方案均自动获得准确性和效率(字符数)的评分
- The player who recreates the target image with the highest score wins 重新创建得分最高的目标图像的玩家获胜
I have to admit when I first saw the idea, I was a little incredulous. How on earth could anyone create THOSE designs using less than a ‘tweets-worth’ of HTML and CSS? That’s just not possible, surely?
我不得不承认，当我第一次看到这个主意时，我有点怀疑。 到底谁能用不到“推文价值”HTML和CSS来创建THOSE设计？ 当然不可能吗？
So I tried and mostly failed – but I also learned and gradually began to understand some of the tricks you need. If you’re curious, I thought I’d walk through 4 tips to help you score higher.
因此，我尝试了并且大部分都失败了–但是我也学习了并逐渐开始理解您需要的一些技巧。 如果您感到好奇，我想我会通过4条提示来帮助您提高得分。
Let me be clear: As I write this post, I’m ranked in 24th position for this battle round. I’ve completed every target so far and , so there are undoubtedly at least two dozen or so players with much better solutions than me. However, I’m happy to share what I know – and take advice from anyone with better ideas.
让我清楚一点 ：在撰写本文时，我在本轮战斗中排名第24位。 到目前为止，我已经完成了所有目标，并且 ，因此毫无疑问，至少有二十多名球员比我拥有更好的解决方案。 但是，我很乐意分享我所知道的-并征询任何有更好想法的人的建议。
提示1：空的“输出”面板永远不会真正空 (Tip #1: An empty Output panel is never TRULY empty)
The first time you load any target you’ll see something like the image above. Your editor always comes pre-filled with example HTML and CSS providing a rudimentary starting position. However, even if you delete every single character in your editor, your Output panel will still not technically be empty.
第一次加载任何目标时，您都会看到类似上图的内容。 您的编辑器始终会预先填充示例HTML和CSS，以提供基本的起始位置。 但是，即使删除编辑器中的每个字符 ，从技术上讲 ，“输出”面板也不会为空。
Why not? If you Inspect the source of the Output panel (hint: switch off the ‘Slide & Compare’ function for now), you’ll find an <iframe> that contains two invisible elements – an <html> and a <body>element.
为什么不？ 如果检查“输出”面板的源(提示：暂时关闭“幻灯片和比较”功能)，您会发现一个<iframe>包含两个不可见元素–一个<html>和<body>元素。
As you can see in the image below, you can see they are present with a line of CSS. Of course, you are perfectly free to style these two HTML elements without having to spend any characters creating them.
如下图所示，您可以看到它们带有一行CSS。 当然，您完全可以随意设置这两个HTML元素的样式，而不必花费任何字符来创建它们。
There is always a HTML and a BODY element ready to style.
总会有一个HTML和一个BODY元素准备好进行样式设置。
This doesn’t mean that you never add your own HTML elements – <DIV>s, <P>s, <I>s, etc – but always try to use the free ‘built-in elements’ first.
这并不意味着您永远不会添加自己HTML元素( <DIV> ， <P> ， <I>等等)，而是始终首先尝试使用免费的“ 内置元素 ”。
提示2：仔细选择度量单位 (Tip #2: Choose your Units of Measure Carefully)
CSSBattle targets are always 400px wide by 300px high, so you could correctly describe the centerpoint as left:200px (that’s 10 characters) and top:150px (9 characters). However, you can just as easily describe that exact position as left:50% (8 characters) and top:50% (7 characters). That’s a handy saving of 4 characters.
CSSBattle目标始终为400px宽，300px高，因此您可以正确地将中心点描述为left:200px (即10个字符)和top:150px (9个字符)。 但是，您可以轻松地将该确切位置描述为left:50% (8个字符)和top:50% (7个字符)。 这样可以节省4个字符。
Percentages don’t always win though. The position top:100px (9 characters) translates to top:33.33% (10 characters) – a backwards step. There’s quite a bit of trial and error finding the best fit. Potentially useful include:
百分比并非总能赢。 top:100px (9个字符)位置转换为top:33.33% (10个字符)–向后移动。 找到最合适的方法需要反复试验。 可能有用的包括：
Pixels:
px像素：
pxPercentages:
%百分比：
%Rems:
rem雷姆斯：
remEms:
emEms：
emInches:
in寸：
inMillimeters:
mm毫米：
mmPicas:
pcPicas：
pcPoints:
pt点：
ptViewport height units: v
h视口高度单位：v
hViewport width Units:
vw视口宽度单位：
vwQuarter of a millimetre:
q四分之一毫米：
q
That last unit type – the ‘q’ – is a relatively little-known unit. But as it’s a single character – I find it uncommonly useful in CSS battles. I’ve found 50px translates to 53 q’s.
最后一个单位类型“ q”是一个鲜为人知的单位。 但是由于它是单个字符，所以我发现它在CSS战斗中非常有用。 我发现50px转换为53 q。
Also note that some CSS properties will assume you mean pixels if you don’t explicitly declare a unit type. In other words, width:80 renders the same as width:80px. Height and margin are the same. On the flipside, box-shadow fails completely if you don’t declare a unit of measure.
另请注意，如果您未明确声明单位类型，则某些CSS属性将假设您是像素。 换句话说， width:80表示与width:80px相同。 高度和边距相同。 另一方面，如果您不声明度量单位，则box-shadow完全失效。
提示3：CSS是级联的-充分利用它。 (Tip #3: CSS is a Cascade – Take full advantage of it.)
CSS is really good at ‘inheritance’ and ‘specificity’. Inheritance allows child elements to get their styles from their parents. ‘Specificity’ means broad rules get overwritten by more carefully or recently declared rules.
CSS确实擅长“继承”和“特殊性”。 继承允许子元素从父母那里获得样式。 “特殊性”是指广泛的规则被更仔细或更近期宣布的规则所覆盖。
In CSS the broadest rule is the * wildcard, which means ‘apply to all elements’. So, the following rule applies a #222 background to everything. If we don’t add any extra HTML, this is a <html> and a <body>.
在CSS中，最广泛的规则是*通配符，表示“ 适用于所有元素 ”。 因此，以下规则将＃222背景应用于所有内容。 如果我们不添加任何额外HTML，则这是<html>和<body> 。
*{background:#222} If we then follow that with a more specific rule targeting only the <body>, we just styled the <html> without having to name it directly – a saving of 3 characters.
然后，如果我们遵循仅针对<body>的更具体的规则，则只需设置<html>样式，而不必直接命名-节省3个字符。
*{background:#222}body{background:#F2994A} Let’s take it one step further.
让我们更进一步。
In CSS the ‘>’ operator means ‘only when X is a parent of Y’ (i.e x>y{}). So, if we write:
在CSS中，“>”运算符仅在X是Y的父代时 (即x>y{} )表示“。 所以，如果我们写：
*>*{...} … we’re saying ‘only apply this rule to any element that is inside any another element’ – in other words, ANY child element.
…我们说的是“ 仅将此规则应用于另一个元素内的任何元素 ”，换句话说，ANY子元素。
As the HTML element is never a child, only the <BODY> gets that second rule. We save another character.
由于HTML元素绝不是子元素，因此只有<BODY>会获得第二条规则。 我们保存另一个字符。
提示4：浏览器很难。 让他们工作。 (Tip #4: Browsers are tough. Make them work.)
Once you’ve taken all the low-hanging fruit, there comes a point where the only practical way to cut characters is to remove code that is technically required but not absolutely critical to the final render. You might say that modern browsers will look kindly on your short and slightly ill-mannered code. This includes but isn’t limited to:
一旦掌握了所有低调的目标，切入点的唯一实际方法就是删除字符，这是技术上必需的，但对最终渲染不是绝对关键的。 您可能会说，现代的浏览器将对您的简短且略有不适的代码有所帮助。 这包括但不限于：
Deleting the closing
</style>删除结束
</style>Deleting closing HTML tags (i.e
</p>,</div>)删除关闭HTML标签(即
</p>，</div>)Deleting the final closing
}of your style block删除样式块的最终结束
}- Removing most spaces and carriage returns. Trial and error is your friend here. 删除大多数空格和回车符。 试错是你的朋友在这里。
Of course, it doesn’t make sense to employ this kind of extreme optimization in production CSS. You’d be compromising the reliability of your code for a negligible saving. But CSSBattles will teach you more about how browsers think and what they do and don’t like.
当然，在生产CSS中采用这种极端的优化没有任何意义。 您将以微不足道的代价牺牲代码的可靠性。 但是CSSBattles将教您更多有关浏览器的想法以及它们做什么和不喜欢的内容。
那么，CSSBattle是否鼓励不良的编码习惯？ (So, Is CSSBattle encouraging bad coding habits?)
I’ve heard a few people mention this as a potential downside. In fact, CSS elder statesman Eric Meyer recently raised the question in the CSSBattle.dev Spectrum feedback:
我听说有人说这是潜在的弊端。 实际上，CSS老政治家Eric Meyer最近在CSSBattle.dev Spectrum反馈中提出了这个问题：
Is the reliance on exploiting parser wrinkles (particularly regarding separation whitespace) to get lower scores intentional, or a side effect? –
是故意利用解析器的皱纹(特别是关于分离空白)来获得较低的分数，还是有副作用？ – (
I don’t think so. To me, this is a way to test, experiment and ultimately come to a deeper understanding of CSS than you can by writing normal, robust production code.
我不这么认为。 对我来说，这是一种测试，试验以及最终比通过编写常规的，强大的生产代码可以更深入地了解CSS的方法。
You could make a good comparison japanese poetry. Haiku is a format built upon hard limits – the arbitrary limitations of 3 lines and 17 syllables.
您可以对日本诗作一个很好的比较。 Haiku是一种基于硬限制的格式，即3行和17个音节的任意限制。
Even the world’s great haiku masters don’t expect to speak or write each day in carefully constructed haiku. However, that doesn’t mean we can’t learn important lessons in word selection, rhythm, balance, and beauty when we read (or write) haiku.
即使是世界上最伟大的句大师也不希望每天都在精心构建的句中说话或写作。 但是，这并不意味着我们在读(或写)句时不能在选词，节奏，平衡和美感方面学习重要的课程。
Writing good ‘CSS Battles code’ isn’t the same as writing good ‘production code’ – but it WILL teach you lessons you couldn’t get elsewhere.
编写好“CSS代码战役”是不一样的编写好的“产品代码” -但它会教你上课，你不能得到其他地方。
翻译自:
dev.c++游戏代码
转载地址：http://fxegb.baihongyu.com/