การเขียนโปรแกรม css

23

บังคับให้วาดใหม่ / รีเฟรช DOM บน Chrome / Mac

ในบางครั้ง Chrome จะแสดง HTML / CSS ที่ถูกต้องอย่างสมบูรณ์ไม่ถูกต้องหรือไม่ถูกเลย การขุดผ่านผู้ตรวจสอบ DOM นั้นเพียงพอที่จะทำให้เกิดข้อผิดพลาดในวิธีการและวาดใหม่ได้อย่างถูกต้องดังนั้นจึงเป็นกรณีที่มาร์กอัปเป็นสิ่งที่ดี สิ่งนี้เกิดขึ้นบ่อยครั้ง (และคาดการณ์ได้) เพียงพอในโครงการที่ฉันกำลังทำอยู่ซึ่งฉันได้วางโค้ดไว้เพื่อบังคับให้วาดใหม่ในบางสถานการณ์ ใช้ได้กับเบราว์เซอร์ / ระบบผสมส่วนใหญ่: el.style.cssText += ';-webkit-transform:rotateZ(0deg)' el.offsetHeight el.style.cssText += ';-webkit-transform:none' เช่นเดียวกับปรับแต่งคุณสมบัติ CSS ที่ไม่ได้ใช้แล้วขอข้อมูลบางอย่างที่บังคับให้วาดใหม่จากนั้นคลายคุณสมบัติ น่าเสียดายที่ทีมงานที่อยู่เบื้องหลัง Chrome สำหรับ Mac นั้นดูเหมือนจะพบวิธีที่จะชดเชยความสูงนั้นได้โดยไม่ต้องวาดใหม่ ดังนั้นการฆ่าแฮ็คที่มีประโยชน์อย่างอื่น จนถึงตอนนี้สิ่งที่ดีที่สุดที่ฉันได้รับเพื่อให้ได้ผลเช่นเดียวกันกับ Chrome / Mac คือความอัปลักษณ์ชิ้นนี้: $(el).css("border", "solid 1px transparent"); setTimeout(function() { $(el).css("border", "solid 0px transparent"); }, 1000); ในขณะที่จริงบังคับให้องค์ประกอบที่จะกระโดดเล็กน้อยจากนั้นทำใจให้สบายวินาทีและกระโดดกลับ …

216 javascript css macos dom google-chrome

15

ใช้การเปลี่ยน CSS3 ด้วยพื้นหลังไล่ระดับสี

ฉันกำลังพยายามเปลี่ยนผ่านโฮเวอร์ด้วย css เหนือรูปขนาดย่อเพื่อให้โฮเวอร์พื้นหลังไล่ระดับสีจางหายไปการเปลี่ยนแปลงไม่ทำงาน แต่ถ้าฉันเปลี่ยนเป็นrgba()ค่ามันก็ใช้ได้ดี ไม่รองรับการไล่ระดับสี? ฉันลองใช้ภาพด้วยเช่นกันมันจะไม่เปลี่ยนภาพเหมือนกัน ฉันรู้ว่าเป็นไปได้เช่นเดียวกับที่โพสต์มีคนทำ แต่ฉันไม่สามารถทราบได้อย่างแม่นยำ ความช่วยเหลือใด ๆ > นี่คือ CSS บางส่วนที่จะทำงานกับ: #container div a { -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; position: absolute; width: 200px; height: 150px; border: 1px #000 solid; margin: 30px; z-index: 2 } #container …

215 css gradient css-transitions

6

ปุ่มใส่สไตล์สำหรับ iPad และ iPhone

ฉันใช้ CSS เพื่อกำหนดลักษณะปุ่มอินพุตบนเว็บไซต์ของฉัน แต่ในอุปกรณ์ IOS การใส่สไตล์จะถูกแทนที่ด้วยปุ่มเริ่มต้นของ Mac มีวิธีการสไตล์ปุ่มสำหรับ iOS หรือวิธีที่จะทำให้การเชื่อมโยงหลายมิติที่มีลักษณะเหมือนปุ่มส่งหรือไม่?

215 iphone css ios ipad

15

วิธีแสดงรายการที่ไม่เรียงลำดับในสองคอลัมน์

ด้วย HTML ต่อไปนี้วิธีที่ง่ายที่สุดในการแสดงรายการเป็นสองคอลัมน์คืออะไร? <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> จอแสดงผลที่ต้องการ: A B C D E การแก้ปัญหาจะต้องสามารถทำงานได้บน Internet Explorer

215 html css html-lists css-multicolumn-layout

3

@ สื่อสื่อแบบสอบถามและการขัดแย้งไวยากรณ์ ASP.NET MVC

ฉันมีเว็บไซต์ขนาดใหญ่ที่ทำงานใน ASP.NET MVC โดยใช้เอ็นจิ้นมุมมองมีดโกน ฉันมีสไตล์ชีทพื้นฐานซึ่งประกอบด้วยสไตล์ทั่วไปทั้งหมดสำหรับไซต์ทั้งหมด อย่างไรก็ตามในบางครั้งฉันมีรูปแบบเฉพาะของหน้าซึ่งใน<head>หน้า - โดยปกติจะเป็นหนึ่งหรือสองบรรทัด ฉันไม่ชอบใส่ CSS <head>เป็นพิเศษเพราะมันไม่ใช่การแยกข้อกังวลอย่างจริงจัง แต่สำหรับหนึ่งหรือสองบรรทัดที่เป็นจริงสำหรับหน้านั้นฉันไม่ต้องการแนบไฟล์อื่นและเพิ่มแบนด์วิดท์ ฉันมีอินสแตนซ์ที่ฉันต้องการใส่เคียวรีสื่อบันทึกของหน้าเฉพาะลงใน<head>แต่เนื่องจากเคียวรีสื่อใช้ @ สัญลักษณ์และวงเล็บปีกกา {} มันขัดแย้งกับไวยากรณ์ของมีดโกน: @section cphPageHead{ <style> /* PAGE SPECIFIC CSS */ ... @media only screen and (max-width : 960px) <-- the @ symbol here is clashing! { ... } } </style> } มีวิธีที่ฉันจะได้รับรอบนี้หรือไม่?

214 css asp.net-mvc-3 razor media-queries

14

ตั้งค่าความทึบของภาพพื้นหลังโดยไม่กระทบกับองค์ประกอบลูก

เป็นไปได้ไหมที่จะกำหนดความทึบของภาพพื้นหลังโดยไม่กระทบต่อความทึบแสงขององค์ประกอบลูก? ตัวอย่าง ลิงก์ทั้งหมดในส่วนท้ายจำเป็นต้องมีสัญลักษณ์แสดงหัวข้อย่อยที่กำหนดเอง (ภาพพื้นหลัง) และความทึบของกระสุนที่กำหนดเองควรเป็น 50% HTML <div id="footer"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> CSS #footer ul li { background: url(/images/arrow.png) no-repeat 0 50%; } สิ่งที่ฉันได้ลอง ฉันพยายามตั้งค่าความทึบของไอเท็มในรายการเป็น 50% แต่จากนั้นความทึบของข้อความลิงก์ก็เช่นกัน 50% - และดูเหมือนจะไม่มีทางที่จะรีเซ็ตความทึบขององค์ประกอบลูกได้: #footer ul li { background: …

214 css opacity

7

การเลื่อนเฟล็กบ็อกซ์พร้อมเนื้อหาล้น

นี่คือรหัสที่ฉันใช้เพื่อให้ได้เลย์เอาต์ด้านบน: .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } .column { padding: 20px; border-right: 1px solid #999; …

214 css layout multiple-columns flexbox

26

ฉันจะซ่อนข้อความตัวยึดตำแหน่งโดยอัตโนมัติเมื่อทำการโฟกัสโดยใช้ css หรือ jquery ได้อย่างไร

นี้จะกระทำโดยอัตโนมัติสำหรับเบราว์เซอร์ทุกยกเว้นChrome ฉันเดาฉันต้องกำหนดเป้าหมายเฉพาะChrome ทางออกใด ๆ ? ถ้าไม่ได้กับCSSแล้วด้วยjQuery ? ขอแสดงความนับถือ.

213 jquery css html google-chrome placeholder

5

Sass - แปลง Hex เป็น RGBa เพื่อความทึบของพื้นหลัง

ฉันมี Sass mixin ต่อไปนี้ซึ่งเป็นการปรับเปลี่ยนครึ่งหนึ่งของตัวอย่าง RGBaอย่างสมบูรณ์: @mixin background-opacity($color, $opacity: .3) { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, $opacity); } ฉันสมัคร$opacityแล้ว แต่ตอนนี้ฉันติดอยู่กับ$colorส่วนแล้ว สีที่ฉันจะส่งเข้ามาใน mixin นั้นจะเป็น HEX ไม่ใช่ RGB ตัวอย่างการใช้ของฉันจะเป็น: element { @include background-opacity(#333, .5); } ฉันจะใช้ค่า HEX ภายในมิกซ์อินนี้ได้อย่างไร

213 css sass background-color mixins rgba

10

ตรวจพบเหตุการณ์คลิกบนองค์ประกอบหลอกเท่านั้น

รหัสของฉันคือ: p { position: relative; background-color: blue; } p:before { content: ''; position: absolute; left:100%; width: 10px; height: 100%; background-color: red; } โปรดดูซอนี้: http://jsfiddle.net/ZWw3Z/5/ ฉันต้องการทริกเกอร์เหตุการณ์คลิกบนองค์ประกอบหลอก (บิตสีแดง) เท่านั้น นั่นคือฉันไม่ต้องการให้เหตุการณ์การคลิกถูกกระตุ้นบนบิตสีน้ำเงิน

213 javascript jquery css

6

เหตุใดจึงต้องการขีดคั่นสำหรับตัวเลือก CSS / HTML?

ในอดีตที่ผ่านมาฉันใช้ขีดเส้นใต้เพื่อกำหนดแอตทริบิวต์classและidใน HTML เสมอ ในช่วงไม่กี่ปีที่ผ่านมาฉันเปลี่ยนไปใช้ขีดกลางเป็นส่วนใหญ่เพื่อให้สอดคล้องกับแนวโน้มในชุมชนไม่จำเป็นต้องเป็นเพราะมันสมเหตุสมผลสำหรับฉัน ฉันคิดเสมอว่าเครื่องหมายขีดคั่นมีข้อเสียมากกว่าและฉันไม่เห็นประโยชน์: การเติมโค้ดและการแก้ไข บรรณาธิการส่วนใหญ่ถือว่าเครื่องหมายขีดคั่นเป็นตัวคั่นคำดังนั้นฉันไม่สามารถแท็บผ่านสัญลักษณ์ที่ฉันต้องการ สมมติว่าคลาสคือ " featured-product" ฉันต้องเติมข้อมูลอัตโนมัติ " featured" ป้อนยัติภังค์และกรอก " product" เมื่อใช้เครื่องหมายขีดล่าง " featured_product" จะถือว่าเป็นหนึ่งคำจึงสามารถเติมได้ในขั้นตอนเดียว เช่นเดียวกับการนำทางผ่านเอกสาร การกระโดดโดยใช้คำหรือการดับเบิลคลิกที่ชื่อคลาสนั้นจะถูกใช้โดยใช้เครื่องหมายขีดกลาง (โดยทั่วไปแล้วฉันคิดว่าคลาสและรหัสเป็นโทเค็นดังนั้นจึงไม่มีความหมายสำหรับฉันว่าโทเค็นควรจะแยกได้ง่ายบนยัติภังค์) ความกำกวมกับตัวดำเนินการทางคณิตศาสตร์ การใช้เครื่องหมายขีดคั่นจะแบ่งการเข้าถึงคุณสมบัติของวัตถุให้กับองค์ประกอบแบบฟอร์มใน JavaScript สิ่งนี้เป็นไปได้เฉพาะกับขีดล่าง: form.first_name.value='Stormageddon'; (เป็นที่ยอมรับว่าฉันไม่ได้เข้าถึงองค์ประกอบของแบบฟอร์มด้วยวิธีนี้ แต่เมื่อตัดสินใจในการขีดกลางและขีดเส้นใต้เป็นกฎสากลให้พิจารณาว่าอาจมีใครบางคน) ภาษาอย่างSass (โดยเฉพาะในกรอบเข็มทิศ ) ได้ตัดสินด้วยเครื่องหมายขีดคั่นเป็นมาตรฐานแม้สำหรับชื่อตัวแปร ตอนแรกพวกเขาใช้ขีดเส้นใต้ด้วยเช่นกัน ความจริงที่ว่านี้มีการแยกวิเคราะห์แตกต่างกันที่ฉันแปลก: $list-item-10 $list-item - 10 ความไม่สอดคล้องกับการตั้งชื่อตัวแปรในภาษาต่างๆ ย้อนกลับไปในวันนั้นฉันเคยเขียนunderscored_namesหาตัวแปรใน PHP, ruby, HTML / CSS และ JavaScript นี่สะดวกและสอดคล้องกัน …

213 html css coding-style naming-conventions

14

เลเยอร์สีกึ่งโปร่งใสเหนือภาพพื้นหลัง?

ฉันมี DIV และฉันต้องการที่จะนำรูปแบบเป็นพื้นหลัง ลวดลายนี้เป็นสีเทา ดังนั้นเพื่อให้ดีขึ้นอีกเล็กน้อยฉันต้องการวาง "เลเยอร์" สีโปร่งใสแบบเบา ๆ ด้านล่างเป็นสิ่งที่ฉันพยายาม แต่ไม่ได้ผล มีวิธีวางเลเยอร์สีเหนือภาพพื้นหลังหรือไม่? นี่คือ CSS ของฉัน: background: url('../img/bg/diagonalnoise.png'); background-color: rgba(248, 247, 216, 0.7);

213 css background-image background-color

7

Glyphicons ที่ใหญ่กว่า

ฉันจะสร้าง Glyphicons ที่ใหญ่กว่าใน twitter bootstrap 3.0 ได้อย่างไร (ไม่ใช่ 2.3.x) รหัสนี้จะทำให้ glyphicons ของฉันใหญ่: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-th-list"> </span> </button> ฉันจะได้ขนาดนี้โดยไม่ใช้คลาส btn-lg ในขณะที่ใช้เพียงช่วงเดียวได้อย่างไร สิ่งนี้จะให้ glyphicon ขนาดเล็ก: <span class="glyphicon glyphicon-link"></span>

212 css twitter-bootstrap twitter-bootstrap-3 glyphicons

16

วิธีจัดรูปแบบ dt และ dd เพื่อให้อยู่ในบรรทัดเดียวกัน

ใช้ CSS ฉันจะจัดรูปแบบต่อไปนี้ได้อย่างไร: <dl> <dt>Mercury</dt> <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd> <dt>Venus</dt> <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd> <dt>Earth</dt> <dd>Earth (1 …

212 html css

3

CSS จัดรายการหนึ่งรายการให้ตรงกับ flexbox

https://jsfiddle.net/vhem8scs/ เป็นไปได้หรือไม่ที่จะจัดแนวรายการสองรายการไว้ทางซ้าย ลิงก์แสดงอย่างชัดเจนยิ่งขึ้น ตัวอย่างสุดท้ายคือสิ่งที่ฉันต้องการบรรลุ ใน flexbox ฉันมีหนึ่งบล็อคของโค้ด ด้วย float ฉันมีโค้ดสี่บล็อก นั่นเป็นเหตุผลหนึ่งว่าทำไมฉันถึงชอบ flexbox HTML <div class="wrap"> <div>One</div> <div>Two</div> <div>Three</div> </div>  <div class="result"> <div>One</div> <div>Two</div> <div>Three</div> </div> CSS .wrap { display: flex; background: #ccc; width: 100%; justify-content: space-between; } .result { background: #ccc; margin-top: 20px; } .result:after { …

212 css alignment flexbox

คำถามติดแท็ก css