Culoarea substituentului. Adăugați stil CSS pentru substituent

Dacă nu sunteți familiarizat cu atributul substituent, atunci să explicăm puțin ce este și unde este folosit. Este folosit în câmpurile de introducere a formularelor. Atributul afișează un text în câmpul de introducere, reprezentând rolul unui anumit indiciu. Mai devreme pe site-ul nostru a fost un exemplu, cu folosind javascript, latura pozitiva această metodă Este compatibil cu browsere încrucișate. Acum să vorbim despre stilizarea atributului substituent, care este folosit pe elementele de intrare și zona de text.
Codul câmpului de introducere din exemplul nostru va arăta cam așa:

La ieșire obținem următorul câmp:

Acum să ne imaginăm că trebuie să stilăm substituentul, pentru aceasta trebuie să scriem un set de reguli în CSS:

::-webkit-input-placeholder ( culoare: #c1c1c1; ) ::-moz-placeholder ( culoare: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( culoare: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder (culoare: #c1c1c1; )

Primim:

Nu putem schimba toate proprietățile, dar o listă a celor mai multe dintre ele acceptate de browserele moderne este prezentată mai jos:
font(de asemenea, proprietăți înrudite)
fundal(de asemenea, proprietăți înrudite)
culoare
spațierea cuvintelor
spațiere între litere
text-decor
vertical-align
text-transformare
înălțimea liniei
text-indentare
text-debordare
opacitate

ÎN browsere diferite regula este scrisă altfel, pentru că Nu încă standard uniform, acest set de înregistrări continuă să fie actual. În browserul IE, precum și firefox sub versiunea 18, substituentul este perceput ca o pseudo-clasă, iar în browserele noi firefox, webkit și blink este perceput ca un pseudo-element.

Scurtarea textului în substituent
Uneori, sfaturile instrumente pot fi atât de lungi încât nu se pot încadra complet în câmpul de introducere. În aceste scopuri puteți utiliza și proprietăți suplimentare care se va reduce text substituentîn câmpul de intrare.

Intrare ( text-overflow:elipse; ) input::-moz-placeholder ( text-overflow:elipse; ) input:-moz-placeholder ( text-overflow:elipse; ) input:-ms-input-placeholder ( text-overflow: :elipsă;

Ca rezultat, obținem un câmp de intrare cu un substituent ca acesta:

Ascundeți textul când faceți clic pe un câmp
În mod implicit, fiecare browser interpretează răspunsul substituentului în mod diferit. În unele browsere este ascuns imediat când dați clic pe câmp, în altele este ascuns când există cel puțin un caracter în câmpul de introducere. Să facem textul să dispară când dai clic pe câmp, la fel în toate browserele.

:focus::-webkit-input-placeholder (culoare: transparent; ) :focus::-moz-placeholder (culoare: transparent; ) :focus:-moz-placeholder (culoare: transparent; ) :focus:-ms-input -substituent (culoare: transparent; )

Obținem această acțiune:

Pseudo-element::culoarea substituentului (în unele cazuri pseudo clasă) vă permite să setați conținutul text al elementului de formular. Este setat folosind atributul substituent: .

Acest text poate fi stilat pentru a se potrivi celor mai multe browsere moderne folosind prefixe speciale:

::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ culoare: roz; ) ::-moz-placeholder ( /* Firefox 19+ */ culoare: roz; ) :-ms-input-placeholder ( /* IE 10+ */ culoare: roz ) :-moz-placeholder ( /* Firefox 18- */ culoare: roz; )

Avertisment: aceasta este o sintaxă non-standard și are nume ciudate asociate cu ea. :placeholder-shown este un standard și chiar și autorii specificației probabil cred că ::placeholder este standardizat.

Ca și în cazul oricărui pseudo-element, îl puteți aplica la anumite elemente după cum urmează:

input.big-dog::-webkit-input-placeholder (culoare: portocaliu; )

Vezi exemplu

Diferența dintre: substituent-afișat și::substituent

:placeholder-sown are scopul de a evidenția formularul de intrare și Substituent CSS culoarea este responsabilă pentru stilul textului.

Uită-te la diagramă:

Acest lucru se dovedește a fi confuz pentru mulți oameni și văd adesea specificații în care există :placeholder-shown, dar nu ::placeholder .

Trebuie remarcat faptul că :placeholder-sown poate afecta stilul textului, deoarece este pentru el element părinte (de exemplu, puteți schimba dimensiunea fontului).

Vă rugăm să rețineți: :placeholder-shown este o pseudo-clasă ( element într-o anumită stare), iar :: substituent este un pseudo-element ( parte vizibilă care nu se află în DOM). Ele diferă prin ghilimele simple și duble.

Deoarece :placeholder-sown este o pseudo-clasă, trebuie să evidențieze un element existent. Și, prin urmare, evidențiază formularul de introducere atunci când este afișat textul din elementul de formular. Pseudo-elementul :: substituent cuprinde textul substituentului în sine.

Element sau clasă?

În acest sens, culoarea substituentului de intrare nu este standardizată. Aceasta înseamnă că fiecare browser are propria înțelegere a modului în care ar trebui să funcționeze.

Această pseudo-clasă a fost implementată inițial în browser Firefox. Această pseudo-clasă nu oferă prea mult spațiu de mișcare. De exemplu, dacă doriți să schimbați culoarea textului atunci când evidențiați un formular de introducere, va trebui să utilizați un selector precum input:focus::placeholder . Dar pseudoclasa nu permite acest lucru.

IE10 acceptă această funcționalitate mai degrabă ca pseudo-clasă decât ca element. În toate celelalte browsere este tratat ca un pseudo-element.

Culoarea substituentului în Firefox

Veți observa că culoarea substituenților arată plictisitoare în comparație cu alte browsere. Imaginea de mai jos arată Firefox 43 în stânga și Chrome 47 în dreapta:

Acest lucru se întâmplă deoarece, implicit, toate stub-urile din Firefox primesc sens suplimentar transparenţă. Pentru a scăpa de acest efect, avem nevoie rândul următor cod:

::-moz-placeholder ( opacitate: 1; )

Încercați să deschideți această demonstrație în Firefox.

Suport stil

Pseudoelementul acceptă următoarele proprietăți:

• proprietățile fontului;
• culoare;
• proprietăți de fundal;
• spațierea cuvintelor;
• spațiere între litere;
• text-decor;
• vertical-align ;
• text-transform ;
• înălțimea liniei;
• text-indentare;
• opacitate;

Resurse suplimentare

Documentația MDN
Documentația IE
Articol detaliat pe blogul Treehouse

Atributul substituent este utilizat pentru a crea indicații în interiorul câmpurilor de introducere goale (etichete Şi ). În acest articol, voi analiza modalități de a modela substituenții, precum și cum să le fac mai ușor de utilizat.</p> <p>Să începem cu un exemplu pentru cei care nu știu încă ce este un substituent și cum să-l folosească:</p> <input type= "email" placeholder= "exemplu@gmail.com" > <p> <input type="email" placeholder="exemplu@gmail.com" class="demo-css-placeholders-input"></p> <p>Când dezvoltați interfețe, ar trebui să țineți cont de comportamentul substituenților. Textul substituent dispare de îndată ce începe tastarea. De aceea nu ar trebui să le folosiți pentru a transmite informații despre câmpul de intrare în sine (câte și ce caractere ar trebui să conțină). În aceste scopuri, cel mai bine este să folosiți eticheta <label>sau un paragraf cu un mic indiciu. Puteți citi mai multe despre caracteristicile utilizării substituenților.</p> <h2>Stilizare</h2> <p>Următoarele reguli sunt folosite pentru a stila substituenții:</p>::-webkit-input-placeholder ( culoare : albastru ; ) ::-moz-placeholder ( culoare : albastru ; ) /* Firefox 19+ */ :-moz-placeholder ( culoare : albastru ; ) /* Firefox 18- * / :-ms-input-placeholder ( culoare : albastru ; ) <p>Arată groaznic, nu-i așa? Și există un motiv pentru asta - până acum regulile CSS pentru substituenți nu au fost standardizate și implementarea este diferită în fiecare browser. Mai multe informații despre toate prefixele necesare pot fi găsite pe caniuse.</p> <p>Dacă utilizați un preprocesor CSS, probabil că veți fi cel mai confortabil să scrieți un mixin simplu pentru a aplica stiluri substituenților. Exemplu în Sass:</p> Substituent @mixin ( & :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @conținut ) ) <p>În funcție de context, un mixin poate fi folosit pentru ambele <a href="https://viws.ru/ro/emkost-batarei-tesla-model-s-batareya-tesly-ustroistvo-harakteristiki.html">aplicare globală</a> stiluri și pentru elemente individuale (încercați pe SassMeister):</p> <span>// La nivel global pentru fiecare câmp de intrare</span>@include substituent (culoare: albastru;) <span>// Pentru anumite câmpuri de intrare</span>.input ( @include substituent ( culoare : verde ; ) ) <h4>Exemplu</h4> <p>Text albastru pentru substituent (nu faceți niciodată acest lucru):</p>.blue-text ::-webkit-input-placeholder ( culoare : #2e8ece ; ) .blue-text :-moz-placeholder ( culoare : #2e8ece ; ) .blue-text ::-moz-placeholder ( culoare : #2e8ece ; ) .blue-text :-ms-input-placeholder ( culoare : #2e8ece ; ) <p> <input type="text" placeholder="Începeți să scrieți aici" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Proprietăți acceptate</h2> <p>Nu fiecare <a href="https://viws.ru/ro/soblyudai-rasstoyanie-mezhdu-bukvami-svoistva-css-intervaly-str-1.html">proprietate CSS</a> poate fi folosit cu substituenți. Aici <a href="https://viws.ru/ro/polnyi-spisok-komand-dlya-russkoi-siri-internet-zametki-i-voprosy-kak.html">lista completa</a> proprietăți acceptate:</p> <ul><li>font și toate proprietățile aferente (dimensiunea fontului, familia fontului etc.)</li> <li>fundal și toate proprietățile aferente (culoarea fundalului, imaginea de fundal etc.)</li> <li>opacitate</li> <li>text-indentare</li> <li>text-debordare</li> <li>culoare</li> <li>text-transformare</li> <li>înălțimea liniei</li> <li>spațierea cuvintelor</li> <li>spațiere între litere</li> <li>text-decor</li> <li>vertical-align</li> </ul><h2>Animații</h2> <p>Ideile de animație aparțin blogului html5.by.</p> <p>Toate exemplele următoare sunt scrise folosind preprocesorul Sass. Fiecare vine cu un link către SassMeister unde puteți găsi codul CSS compilat.</p> <p>Cel mai probabil, veți dori să aplicați animații substituenților atunci când câmpul de intrare este focalizat. Toate acestea se fac destul de simplu. Este suficient să folosiți de câteva ori substituentul scris anterior:</p>.input ( @include substituent ( <span>// Stiluri pentru starea normală</span>) & :focus ( @include substituent ( <span>// Stiluri după evenimentul de focalizare</span> } } } <h3>Schimbați transparența</h3>.input ( @include substituent ( culoare : #aaa ; opacitate : 1 ; tranziție : opacitate 300 ms ; ) & :focus ( @include substituent ( opacitate : 0 ; ) ) ) <p> <input type="text" placeholder="Demo: Schimbarea transparenței" class="demo-css-placeholders-input pl-opacity"></p> <h3>Schimbați la dreapta și la stânga</h3> <p>Cum <a href="https://viws.ru/ro/kak-ubrat-probely-mezhdu-slovami-v-vorde-i-pri-formatirovanii.html">latime mai mare</a> câmpurile de intrare, cu atât valoarea proprietății text-indent ar trebui să fie mai mare. Pentru <a href="https://viws.ru/ro/poisk-po-rasshireniyu-faila-windows-7-standartnyi-instrument-poiska-pole.html">câmp standard</a> O intrare de 500px va fi suficientă pentru cele mai largi, ar trebui să o selectați manual. Viteza animației depinde de lățimea câmpului de introducere și de valoarea indentării textului. Pentru a vă deplasa la stânga, trebuie să utilizați valori negative, de exemplu -500px .</p><p> <input type="text" placeholder="Demo: deplasați la dreapta" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Demo: comutați la stânga" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Schimbați în jos</h3> <p>Ca și în exemplul anterior, animația depinde de dimensiunea intrării, dar în acest caz, acordați atenție înălțimii. Pentru marea majoritate a câmpurilor de intrare, valoarea necesară a înălțimii liniei va fi de 100 pixeli . Din păcate, proprietatea line-height nu poate fi utilizată pentru a crea un efect de schimbare în sus, deoarece proprietatea nu acceptă valori negative.</p>.input ( @include substituent ( text-indent : 0px ; tranziție : text-indent 300ms ; ) & :focus ( @include substituent ( text-indent : 500px ; ) ) ) <p> <input type="text" placeholder="Demo: comutați în jos" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Toți împreună</h3> <p>Pentru a face ca utilizarea codului de animație pentru substituenți să fie plăcută și convenabilă, puteți scrie o mică bibliotecă de mixuri pentru orice preprocesor. Biblioteca arată astfel ():</p>@mixin substituent ( & : :- placeholder webkit-input ( @content ) & : - substituent moz ( @conținut ) & : : - substituent moz ( @conținut ) & : - substituent de intrare ms ( @conținut ) ) @mixin pl-shift ($side : stânga , $position : 500px , $duration : 200ms ) ( @include substituent ( text-indent : 0 ; tranziție : text-indent $duration ; ) & :focus ( @include substituent ( text-indent : if ($partea == stânga , - $poziție , $poziție ) ) ) @mixin pl-slide-down ($poziție : 5 , $durată : 200ms ) ( @include substituent ( line-height : 1 ; transition : line-height $duration ; ) & :focus ( @include placeholder ( line-height : $position ; ) ) ) @mixin pl-fade-out ($duration : 200ms ) ( @include placeholder ( opacitate : 1 ; tranziție) : opacitate $durată ) & :focus ( @include substituent ( opacitate : 0 ; ) ) <p>Este foarte usor de folosit. Este suficient să conectați mixin-ul dorit la orice câmp de intrare sau pur și simplu să creați o regulă globală pentru toți pașii de pe pagină:</p> <span>// Pentru elemente individuale</span>.pl-shift-right ( @include pl-shift (dreapta); ) .pl-fade-out ( @include pl-fade-out ; ) <span>// Pentru orice altceva</span>@include pl-shift ( stânga ); <h2>Autoprefixer</h2> <p>Dacă nu folosiți un preprocesor și tot nu doriți ca fișierul sursă CSS să se transforme într-o mizerie de prefixe pe care să le vadă toată lumea <a href="https://viws.ru/ro/yandeks-brauzer-ne-otvechaet-vozmozhnye-problemy-brauzera-ne-otkryvaetsya.html">browsere posibile</a>, apoi acordați atenție Autoprefixerului. Cu ajutorul lui <a href="https://viws.ru/ro/kto-znaet-kak-sdelat-vognutye-ugly-kak-na-kartinke-na-chistom-css-okonchatelnyi.html">CSS pur</a> poate fi murdar (dar într-un fișier diferit) prin adăugarea tuturor prefixelor necesare la toate proprietățile. Pentru ca pluginul să funcționeze cu substituenți, trebuie doar să utilizați pseudo-element::placeholder:</p>:: substituent ( culoare : portocaliu ; ) . intrare::substituent(culoare:albastru;) <p>După analizarea stilurilor dvs., Autoprefixer va crea <a href="https://viws.ru/ro/primenenie-stilei-v-html-vklyuchenie-css-v-html-kod-podklyuchenie-otdelnogo-css-faila.html">CSS separat</a> un fișier care va conține toate prefixele necesare pentru toate browserele pe care le specificați.</p> <h2>Ce urmează</h2> <p>După cum am scris mai sus, tot ceea ce este legat de aplicarea stilurilor la substituenți nu a fost încă standardizat. Acest lucru va fi rezolvat în curând. Specificația Selector Level 4 a adăugat o pseudo-clasă: placeholder-sown , care va standardiza în sfârșit amestecul nebun de pseudo-clase și pseudo-elemente care există în prezent. Puteți monitoriza suportul pe caniuse (în prezent nu este acceptat în niciun browser).</p> <p>Aplicarea stilurilor cu :placeholder-sown va fi mult mai ușoară:</p>.input : substituent-afisat ( culoare : albastru ; ) <p>În acest tutorial veți învăța cum să schimbați <b>culoarea alt text</b>(culoarea textului substituent) câmpuri de formular.</p><p>Textul substituent al câmpului formular conține un sfat explicativ care indică datele așteptate în câmp. Acesta ar putea fi un exemplu sau <a href="https://viws.ru/ro/winrar-na-russkom-yazyke-chto-novogo-v-etoi-versii-kratkoe-opisanie-winrar.html">scurtă descriere</a> informatiile asteptate. Un scurt indiciu este afișat în câmp înainte ca utilizatorul să înceapă să introducă date.</p><p>În mod implicit, textul alternativ este gri deschis (care este modul în care browserele îl afișează). Pentru a adăuga la acest text <a href="https://viws.ru/ro/presety-dlya-laitruma-v-stile-fentezi-ustanovka-polzovatelskih-presetov-v.html">stiluri personalizate</a> Va trebui să utilizați prefixele browserului pentru proprietățile CSS.</p><p>Pentru a schimba culoarea textului alternativ, urmați aceste instrucțiuni:</p><ol><p>Cod conform <a href="https://viws.ru/ro/sleduyushchee-poiskat-nuzhnuyu-vam-informaciyu-v-yandekse-pravila-sostavleniya.html">următoarele informații</a>(rețineți că trebuie să adăugați același cod de 4 ori pentru fiecare prefix de browser):</p><p>Selectați fișierul la care veți adăuga codul. Îl puteți adăuga la orice fișier CSS de pe site-ul dvs., dar am pregătit pentru dvs. o listă de fișiere în care este recomandat să adăugați <a href="https://viws.ru/ro/kak-pomenyat-kursor-na-myshke-izmenyaem-kursor-myshi-s-pomoshchyu-pravila-css.html">Reguli CSS</a> Pentru <a href="https://viws.ru/ro/tipy-rozetok-v-raznyh-stranah-vidy-elektricheskih-rozetok-i-vilok-v-raznyh.html">diferite tipuri</a> motoarele de site:</p><h5>Șabloane CMS:</h5><ul><li>Teme WordPress (teme WooCommerce/Jigoshop) <i>/wp-content/themes/themeXXXXX/style.css</i></li><li>Șabloane Joomla (șabloane VirtueMart) <i>/templates/themeXXXX/css/template.css</i></li><li>Teme Drupal <i>/sites/all/themes/themeXXX/css/style.css</i></li><li>Șabloane web (HTML5) <i>/css/style.css</i></li> </ul><h5>Șabloane de comerț electronic:</h5><ul><li>Teme Magento <i>/skin/frontend /default/themeXXX/css/styles.css</i></li><li>Teme PrestaShop <i>/themes/themeXXXX/css/global.css</i></li><li>Teme OpenCart <i>/catalog/view/theme/themeXXX/stylesheet /stylesheet .css</i></li><li>Teme ZenCart <i>/includes/templates/themeXXX/css/stylesheet .css</i></li><li>Șabloane osCommerce <i>/css/stylesheet.css</i></li><li>Șabloane Shopify <i>stil.css.lichid</i></li> </ul></li><li><p>Salvați modificările și încărcați fișierele CSS pe server.</p> </ol> <p>Bună ziua, astăzi nu veți surprinde pe nimeni folosind un substituent pentru introducere. Substituent este un text temporar cu un exemplu în interiorul intrării, care dispare atunci când introduceți text. <a href="https://viws.ru/ro/vzveshivaem-selektory-css-prioritety-stilei-v-css.html">Stilul CSS</a> pentru substituent, vom încerca să ne înregistrăm astăzi.</p><p><img src='https://i0.wp.com/htmler.ru/wp-content/uploads/2014/08/htmler_css_placeholder.jpg' width="100%" loading=lazy loading=lazy></p><h2>Sarcină: creați-vă propriul stil CSS pentru substituent</h2><p>Să presupunem că avem un site web elegant care folosește un substituent în intrare. Trebuie să facem ca stilul gri sumbru al textului substituent <a href="https://viws.ru/ro/fotografii-dlya-shapki-kanala-kak-iz-lyuboi-kartinki-sdelat.html">stilul general</a> site-ul. Cum se poate realiza acest lucru? Voi spune imediat că acest lucru nu funcționează încă în toate browserele. Mai exact, nu funcționează deloc în IE versiunile 9 și mai jos în 10 și mai târziu funcționează cu mare dificultate; Firefox și browserele webkit sunt o altă problemă.</p><h2>Soluție: stilul css pentru substituent</h2><p>Deci, am stabilit sarcina, cum o vom rezolva?</p><p>Mai întâi, să creăm un teren de testare:</p><p> <input type="text" name="input" placeholder="Textul substituentului nostru" value="" /> </p><p>Gata, acum să vedem ce putem face cu stilul: webkit și mozilla au propriii modificatori care vă permit să atribuiți un stil special substituentului: ::-webkit-input-placeholder și:-moz-placeholder. Să vedem cum să le folosim:</p><p>Să descriem stilul intrării în sine și textul din ea ( <a href="https://viws.ru/ro/kak-v-vorde-ubrat-sinii-cvet-bukv-kak-ubrat-fon-teksta-ili-stranicy-v.html">albastru</a> pentru contrast în exemplu):</p><p>Intrare( lățime: 250px; culoare: albastru; greutate font: normal; stil font: normal; )</p><p>Acum să scriem un stil special pentru textul substituent din această intrare pentru browserele Webkit (Chrome, Safari, Opera):</p><p>Intrare::-webkit-input-placeholder (culoare: roșu; stil font: cursiv; greutate font: bold; )</p><p>Să facem textul substituentului roșu <a href="https://viws.ru/ro/html-vydelenie-vydelenie-teksta-zhirnym-kursivom-i-cvetom.html">cursiv aldine</a>. Rețineți că, spre deosebire de alte pseudoclase CSS, care sunt separate printr-un singur două puncte, stilul pentru substituent din webkit este separat prin două puncte.</p><p>Acum să scriem exact același stil pentru <a href="https://viws.ru/ro/plagin-adobe-flash-player-dlya-mozilla-firefox-flash-player-dlya-mozilla-firefox-instrukciya-po.html">Mozilla Firefox</a> browsere:</p><p>Intrare:-moz-placeholder(culoare: roșu; stil font: cursiv; greutate font: bold; )</p><p>Gata. Stilul CSS pentru substituent, bineînțeles că puteți scrie oricare care este mai potrivit pentru designul dvs. O demonstrație de lucru poate fi vizualizată pe jsFiddle sau chiar mai jos: <br></p><p>Sper că acest articol vă va ajuta să vă faceți site-ul mai ușor de utilizat.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="comment_box" id="comments"> </div> </div> <div id="sidebar"> <div class="widget widget_nav_menu" id="nav_menu-2"> <div class="menu-mainmenu-container"> <ul id="menu-mainmenu-2" class="menu"> <li class="submenu"><a href="https://viws.ru/ro/category/internet/">Internet</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/programs/">Programe</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/instructions/">Instrucţiuni</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/browsers/">Browsere</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/windows-10/">Windows 10</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/android/">Android</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/ios/">iOS</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/communication/">Conexiune</a> </li> </ul> </div> </div> <div class="widget"> <div class="heading star">Ultimele postări</div> <div class="popular_posts"> <div class="news_box"> <a href="https://viws.ru/ro/mozhno-li-usb-type-c-test-skorosti-usb-type-c-naskolko-medlennym-mozhet-byt.html" class="thumb"><img width="95" height="95" src="/uploads/3a5ac00979e4600ea6c23f25064f64be.jpg" class="attachment-mini size-mini wp-post-image" alt="Test de viteză USB Type-C: Cât de lent poate fi portul de viteză al laptopului dvs.?" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/mozhno-li-usb-type-c-test-skorosti-usb-type-c-naskolko-medlennym-mozhet-byt.html">Test de viteză USB Type-C: Cât de lent poate fi portul de viteză al laptopului dvs.?</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/startovalo-testirovanie-kriptovalyuty-kotoruyu-mozhno.html" class="thumb"><img width="95" height="95" src="/uploads/a31ebacfc77ea9a8eebf8fb9a102c333.jpg" class="attachment-mini size-mini wp-post-image" alt="Cum poți câștiga bani alergând și cine dă bani pentru mers pe jos?" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/startovalo-testirovanie-kriptovalyuty-kotoruyu-mozhno.html">Cum poți câștiga bani alergând și cine dă bani pentru mers pe jos?</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/test-polochnoi-hi-fi-akustiki-srednei-cenovoi-kategorii-v-poiskah.html" class="thumb"><img width="95" height="95" src="/uploads/4a78f9dd11997c90d8ceb543ce0d42d6.jpg" class="attachment-mini size-mini wp-post-image" alt="În căutarea sunetului real" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/test-polochnoi-hi-fi-akustiki-srednei-cenovoi-kategorii-v-poiskah.html">În căutarea sunetului real</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/obzor-htc-one-m8-staryi-novyi-flagman-obzor-htc-one-m8---krasivyi-flagman-ot-htc-vse.html" class="thumb"><img width="95" height="95" src="/uploads/4b7bd500dd29e639d90c4dff16e9ee9d.jpg" class="attachment-mini size-mini wp-post-image" alt="Recenzie HTC One (M8). Vechi-nou flagship. Recenzie HTC ONE M8 - un flagship frumos de la HTC Toate modificările htc one m8" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/obzor-htc-one-m8-staryi-novyi-flagman-obzor-htc-one-m8---krasivyi-flagman-ot-htc-vse.html">Recenzie HTC One (M8). Vechi-nou flagship. Recenzie HTC ONE M8 - un flagship frumos de la HTC Toate modificările htc one m8</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/gromkaya-svyaz-na-noutbuke-kak-otklyuchit-vklyuchenie-gromkoi.html" class="thumb"><img width="95" height="95" src="/uploads/8c7c03958397fae9367958df0c0334ec.jpg" class="attachment-mini size-mini wp-post-image" alt="Porniți difuzorul pe Samsung Galaxy" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/gromkaya-svyaz-na-noutbuke-kak-otklyuchit-vklyuchenie-gromkoi.html">Porniți difuzorul pe Samsung Galaxy</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading star">Popular</div> <div class="popular_posts"> <div class="news_box"> <a href="https://viws.ru/ro/kak-proverit-nalichie-shim-v-monitore-bolshoi-test-zhk-televizorov-ishchem-model.html" class="thumb"><img width="95" height="95" src="/uploads/8fbf4c509c2f496e01fb9e916022aac0.jpg" class="attachment-mini size-mini wp-post-image" alt="Test mare de televizoare LCD: caut un model fara ondulatie" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/kak-proverit-nalichie-shim-v-monitore-bolshoi-test-zhk-televizorov-ishchem-model.html">Test mare de televizoare LCD: caut un model fara ondulatie</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/vhod-v-adminku-wordpress-kak-popast-v-admin-panel-wordpress-gde-v-adminke.html" class="thumb"><img width="95" height="95" src="/uploads/2858f108d0cdbb7d1b58389099c93518.jpg" class="attachment-mini size-mini wp-post-image" alt="Cum să ajungeți la panoul de administrare WordPress Unde în panoul de administrare WordPress" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/vhod-v-adminku-wordpress-kak-popast-v-admin-panel-wordpress-gde-v-adminke.html">Cum să ajungeți la panoul de administrare WordPress Unde în panoul de administrare WordPress</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/rasshirenie-dlya-integracii-download-master-v-google-chrome-opera-i-drugie.html" class="thumb"><img width="95" height="95" src="/uploads/8724b748c8b14da05772a884fa3a1fc9.jpg" class="attachment-mini size-mini wp-post-image" alt="Eliminarea (adăugarea) integrării Download Master în browserele Internet Explorer, Chrome, Firefox, Opera, Safari, Netscape Navigator Integrarea extensiei Download Master în Moz" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/rasshirenie-dlya-integracii-download-master-v-google-chrome-opera-i-drugie.html">Eliminarea (adăugarea) integrării Download Master în browserele Internet Explorer, Chrome, Firefox, Opera, Safari, Netscape Navigator Integrarea extensiei Download Master în Moz</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading">Ştiri</div> <div class="business_news"> <div class="news"> <div class="date">2024-07-23 01:28:27</div> <a href="https://viws.ru/ro/kak-uznat-chto-chelovek-zashel-vkontakte-kak-uznat-kto-zahodil-na-moyu-stranicu.html" class="title">Cum pot afla cine mi-a vizitat pagina VKontakte?</a> </div> <div class="news"> <div class="date">2024-07-21 01:33:12</div> <a href="https://viws.ru/ro/proshivki-xiaomi-vazhnaya-informaciya-samostoyatelnaya-proshivka.html" class="title">Auto-firmware pentru telefoane, smartphone-uri și tablete Xiaomi Acum puteți lucra cu firmware-ul</a> </div> <div class="news"> <div class="date">2024-07-19 01:33:33</div> <a href="https://viws.ru/ro/huavei-meit-8-obzor-ne-gorit-i-ne-vzryvaetsya-tehnologii-mobilnoi-svyazi.html" class="title">nu arde sau explodează</a> </div> <div class="news"> <div class="date">2024-07-19 01:33:33</div> <a href="https://viws.ru/ro/planshet-dlya-chainikov-instrukciya-po-ispolzovaniyu-planshet.html" class="title">Tabletă pentru manechine: instrucțiuni de utilizare Vizualizarea informațiilor despre dispozitiv</a> </div> <div class="news"> <div class="date">2024-07-17 01:35:12</div> <a href="https://viws.ru/ro/sistemy-aktivnoi-reklamy-frame-ili-iframe-iframe-trafik-chto-takoe.html" class="title">Sisteme de publicitate active frame sau iframe</a> </div> </div> </div> <div class="widget ai_widget" id="ai_widget-5"> <div class='dynamic dynamic-13' style='margin: 8px 0; clear: both;'> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="fixed"> <div class="inner"> <div class="footer_l"> <a href="https://viws.ru/ro/" class="logo" style="background:none;">views.ru</a> <div class="copyright"> <p>views.ru - Totul despre tehnologia modernă. Defecțiuni, rețele sociale, internet, viruși</p> <p><span>2024 - Toate drepturile rezervate</span></p> </div> </div> <div class="footer_c"> <ul id="menu-topmenu-1" class="nav"> <li><a href="https://viws.ru/ro/feedback.html">Contacte</a></li> <li><a href="">Despre site</a></li> <li><a href="">Publicitate pe site</a></li> </ul> <div class="footer_menu"> <ul id="menu-nizhnee-1" class=""> <li id="menu-item-"><a href="https://viws.ru/ro/category/internet/">Internet</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/programs/">Programe</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/instructions/">Instrucţiuni</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/browsers/">Browsere</a></li> </ul> <ul id="menu-nizhnee-2" class=""> <li id="menu-item-"><a href="https://viws.ru/ro/category/internet/">Internet</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/programs/">Programe</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/instructions/">Instrucţiuni</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/browsers/">Browsere</a></li> </ul> </div> </div> </div> </div> </div> </div> <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://viws.ru/wp-content/themes/delo/assets/scripts/theme.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 60, "margin_bottom" : 200, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-8','ai_widget-5'] } ; </script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script async="async" type='text/javascript' src='https://viws.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script> </body> </html>